Netflix使用Node.js+React.js让网站启动更快

Posted 2021-04-25 并发编程网

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等技术。

================================================

感谢 Coding 和 UPYUN 对本微信的支持。Coding.net 是一个面向开发者的云端开发平台，目前提供代码托管、运行空间、质量控制、项目管理等功能。

upyun.com是国内领先的云服务提供商，专注于提供静态文件的云存储、云处理和CDN加速服务。现在注册，即可免费体验！