Netflix分享了其如何使用Node.js+React.js替代原来的Java + JQuery传统架构,从而让网站页面加载更快,用户体验UX更好。
性能很重要。Netflix的会员希望一打开浏览器就能立即开始观看他们喜爱的内容,更快的启动才能有更令人满意的用户使用UX。所以,Netflix网站的用户界面工程团队将启动性能作为第一优先级考虑。
这一努力最终使得启动时间降低了70%,工作主要集中在三个主要方面:
1.服务器和客户端呈现
2.通用的JavaScript
3.JavaScript的有效载荷的降低
Netflix原来的网站是典型的服务器和客户端页面标记(markup)语法分离的结构,这是因为后端与前端使用了不同的语言,后端服务器使用了Java的Tomcat、Struts和Tiles,在浏览器客户端,使用Javascript的JQuery加强服务器端产生的Html标记。
这种分离导致了启动时间的延长,每次用户上Netflix.com,Java层会产生Html页面的大部分内容,占据了整个页面生命周期的主要部分,因此,用户需要等待Html页面出现,在这之前无法访问页面的任何其他部分。
新的架构只使用很少的页面Html标记,服务器提供更少的数据,因此也就会花费更少的时间将数据转为Html标记的DOM,一旦客户端Javascript接管,它可以检索到当前会话中剩余的数据,然后完成剩余的页面渲染。
为了在客户端和服务器端支持相同的渲染展现,需要重新思考Netflix的渲染管道,必须抛弃之前在服务器产生Html语法然后在客户端增强的传统架构,采用前后端统一的Javascript能够灵活方便实现这一目标。
传统架构的三大痛点导致了Node.js新架构诞生:
1不同语言之间上下文语境进行切换并不理想。
2.Html语法标记的增强导致太多服务器端产生Html语法标记的代码和客户端代码之间更紧密的耦合。
3.宁可使用相同API而产生的所有HTML语法标记。
当然,有许多解决方案并不需要通用的JavaScript,但是我们发现以下教训是最重要的:当存在同一事物的两个副本,这也很容易导致厚此薄彼。 使用通用的JavaScript意味着渲染呈现逻辑能够简单地传递到客户端。
Node.js和React.js架构是自然适合这种风格的应用。 使用Node.js和React.js,我们可以从服务器渲染 ,并随后在在客户端浏览器上渲染呈现其后所有的变化,这些动作都是在初始的Html标记语法和React.js组件被发送到浏览器以后就可以开始。
因为前后端没有共同的渲染呈现逻辑,只有必要的数据在启动时需要加载,其他一切只有在后端变得可用时再进行推送,只有这样,我们才能真正挖掘实现渲染的潜力。
另外一个好处是降低了Javascript的负荷,网络上构建丰富的互动体验必然会转化为大量的Javascript负荷,在新的架构中,可以显著地降低对Html语法增强的依赖性,使用更小的只适合当前访问者的Javascript模块替换以前一次性下载统一的大型的Javascript文件。
即用即加载小的JS模块导致更少的Javascript文件在前后端传输,提高了Javascript启动浏览的时间,这条路远远没有结束。
提供启动性能之路远远没有结束,未来netflix会探索Service Workers,ASM.js,Web Assembly等技术。 转自: http://www.jdon.com/47477
原文链接:https://www.f2er.com/react/307457.html性能很重要。Netflix的会员希望一打开浏览器就能立即开始观看他们喜爱的内容,更快的启动才能有更令人满意的用户使用UX。所以,Netflix网站的用户界面工程团队将启动性能作为第一优先级考虑。
这一努力最终使得启动时间降低了70%,工作主要集中在三个主要方面:
1.服务器和客户端呈现
2.通用的JavaScript
3.JavaScript的有效载荷的降低
Netflix原来的网站是典型的服务器和客户端页面标记(markup)语法分离的结构,这是因为后端与前端使用了不同的语言,后端服务器使用了Java的Tomcat、Struts和Tiles,在浏览器客户端,使用Javascript的JQuery加强服务器端产生的Html标记。
这种分离导致了启动时间的延长,每次用户上Netflix.com,Java层会产生Html页面的大部分内容,占据了整个页面生命周期的主要部分,因此,用户需要等待Html页面出现,在这之前无法访问页面的任何其他部分。
新的架构只使用很少的页面Html标记,服务器提供更少的数据,因此也就会花费更少的时间将数据转为Html标记的DOM,一旦客户端Javascript接管,它可以检索到当前会话中剩余的数据,然后完成剩余的页面渲染。
为了在客户端和服务器端支持相同的渲染展现,需要重新思考Netflix的渲染管道,必须抛弃之前在服务器产生Html语法然后在客户端增强的传统架构,采用前后端统一的Javascript能够灵活方便实现这一目标。
传统架构的三大痛点导致了Node.js新架构诞生:
1不同语言之间上下文语境进行切换并不理想。
2.Html语法标记的增强导致太多服务器端产生Html语法标记的代码和客户端代码之间更紧密的耦合。
3.宁可使用相同API而产生的所有HTML语法标记。
当然,有许多解决方案并不需要通用的JavaScript,但是我们发现以下教训是最重要的:当存在同一事物的两个副本,这也很容易导致厚此薄彼。 使用通用的JavaScript意味着渲染呈现逻辑能够简单地传递到客户端。
Node.js和React.js架构是自然适合这种风格的应用。 使用Node.js和React.js,我们可以从服务器渲染 ,并随后在在客户端浏览器上渲染呈现其后所有的变化,这些动作都是在初始的Html标记语法和React.js组件被发送到浏览器以后就可以开始。
因为前后端没有共同的渲染呈现逻辑,只有必要的数据在启动时需要加载,其他一切只有在后端变得可用时再进行推送,只有这样,我们才能真正挖掘实现渲染的潜力。
另外一个好处是降低了Javascript的负荷,网络上构建丰富的互动体验必然会转化为大量的Javascript负荷,在新的架构中,可以显著地降低对Html语法增强的依赖性,使用更小的只适合当前访问者的Javascript模块替换以前一次性下载统一的大型的Javascript文件。
即用即加载小的JS模块导致更少的Javascript文件在前后端传输,提高了Javascript启动浏览的时间,这条路远远没有结束。
提供启动性能之路远远没有结束,未来netflix会探索Service Workers,ASM.js,Web Assembly等技术。 转自: http://www.jdon.com/47477