React.js + Node.js使网站快速渲染

发布时间：2020-12-15 05:20:48 所属栏目：百科来源：网络整理

导读：Netflix分享了其如何使用Node.js+React.js替代原来的Java + JQuery传统架构，从而让网站页面加载更快，用户体验UX更好。性能很重要。Netflix的会员希望一打开浏览器就能立即开始观看他们喜爱的内容，更快的启动才能有更令人满意的用户使用UX。所以，Netflix

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!