通过改进Netflix.com注册过程中所使用的JavaScript及预加载技术，Netflix开发团队为移动用户和桌面用户提供了更好的用户体验。

关于Web性能，没有银弹，简单的静态页面包含极少的JavaScript，可以从服务器渲染受益。库的谨慎使用可以为复杂的页面带来巨大的价值。

Netflix是最受欢迎的视频流服务之一。自2016年在全球推出以来，该公司发现，许多新用户不仅在移动设备上进行了注册，还使用了不太理想的连接。

通过改进Netflix.com注册过程中所使用的JavaScript及预加载技术，开发团队能够为移动用户和桌面用户提供更好的用户体验，主要改进如下。

加载和交互时间减少了50%（Netflix.com桌面登录主页）；
在从React和其他客户端库切换到普通的JavaScript之后，JavaScript包大小减少了200KB。服务器端仍然使用React。
HTML、CSS、JavaScript（React）预加载使后续页面的浏览交互时间减少了30%。

减少JavaScript传输，缩短交互时间

Netflix针对其登录主页的性能进行了优化，用户在这个页面上注册或登录到网站。

这个页面最初包含300KB的JavaScript，其中一些是React和其他客户端代码（比如像Lodash这样的实用程序库），还有一些是补充React状态所需的上下文数据。

Netflix的所有网页都由服务器端渲染的React提供，提供生成的HTML，然后提供客户端应用程序，因此，新优化的主页要保持结构类似，为开发人员提供一致的体验，这很重要。

使用Chrome的开发工具和Lighthouse模拟在3G连接上加载登录主页，结果显示，登录主页需要7秒的加载时间，对于一个简单的登录页面来说太长了，因此需要研究改进的可能。通过一些性能审计，Netflix发现他们客户端的JS开销很高。

Chrome开发工具中Netflix.com优化前的网络节流

通过在浏览器中关闭JavaScript并观察站点的哪些元素仍起作用，开发团队可以确定登录主页是否真得需要React。

由于页面上的大多数元素都是基本的HTML，剩下的元素（如JavaScript单击处理和类添加）可以用普通的JavaScript替换，并且页面的语言切换器（最初使用React构建）用普通的JavaScript重新构建只用了不到300行代码。

移植到普通JavaScript的组件列表：

基础交互（主页选项卡）
语言切换器
“Cookie横幅（Cookie banner）”（针对非美国用户）
客户端日志分析
性能度量和记录
广告归属检测引导代码（出于安全考虑，放在沙箱式iFrame 中）

尽管React最初占用的空间仅为45KB，但将React、几个库和相应的应用程序代码从客户端移除后，JavaScript的总量减少了200KB以上，这使得Netflix在登录主页的交互时间减少了50%以上。

删除客户端React、Lodash和其他库前后的负载比较。

在实验室环境中，我们可以使用Lighthouse（trace）验证，用户现在可以与Netflix主页快速交互。桌面TTI小于3.5秒。

交互时间优化后的Lighthouse报告

实际指标呢？使用Chrome用户体验报告，我们可以看到，首次输入延迟——从用户第一次与你的网站交互到浏览器真正响应那次交互的时间——对于97%的Netflix桌面用户来说是非常快的。这很棒。

首先输入延迟（FID）度量用户在与页面交互时的延迟体验。

后续页面的React预加载

为了进一步提高浏览登录主页的性能，Netflix利用用户在登录页面上花费的时间对于用户可能会登录的下一个页面进行预加载。

这是通过浏览器内置的 API和XHR预加载这两项技术实现的。

浏览器内置API由页面头部标签内的一个简单链接标签组成。它建议预加载浏览器资源（例如HTML、JS、CSS、图像），尽管它不能保证浏览器会预加载资源，而且它也没有得到其他浏览器的完全支持。

预加载技术比较

另一方面，XHR预加载已经成为浏览器标准多年，当Netflix团队提示浏览器缓存资源时，其成功率达到95%。虽然XHR预加载不能用于预加载HTML文档，但Netflix使用XHR预加载后续页面的JavaScript和CSS包。

注意：Netflix的HTTP响应头配置为使用XHR防止缓存HTML（它们确实不缓存第二个页面的HTML）。不过，“链接预加载（Link Prefetch）”会按预期工作，因为它对HTML有效，即使设置了不缓存。

// 新建一个XHR请求
const xhrRequest = new XMLHttpRequest();
// 针对预加载的资源打开请求
xhrRequest.open('GET', '../bundle.js', true);
// 发送！
xhrRequest.send();

通过使用浏览器内置的API和XHR预加载HTML、CSS和JS，交互时间减少了30%。这个实现也不需要重写JavaScript，不会对登录主页的性能造成负面影响，因此，提供了一个很有价值的工具，以非常低的风险提高页面性能。

在实现预加载之后，Netflix开发人员通过分析页面上交互时间的减少以及使用Chrome开发工具直接度量资源缓存命中，观察到了性能的提升。

Netflix登录主页优化概述

通过预取资源和优化Netflix登录主页上的客户端代码，Netflix能够在注册过程中大大改善其交互时间指标。通过使用浏览器内置的API和XHR预加载未来页面，Netflix能够将交互时间减少了30%。这是对于第二页加载来说的，其中包含单页应用注册过程的引导代码。

Netflix团队进行的代码优化表明，React是一个有用的库，但它可能无法为每个问题提供足够的解决方案。通过从第一个用于注册的登录页面的客户端代码中删除React，交互时间减少了50%以上。缩短客户端上的交互时间还会导致用户以更快地速度单击注册按钮，这表明代码优化总体上可以带来更好的用户体验。

虽然Netflix没有在主页中使用React ，但他们会为后续的页面预取。这使得他们整个页面应用程序流程中的其他部分可以利用客户端React。

小结

通过密切关注JavaScript的开销，Netflix发现了改善交互时间的机会。要了解你的站点是否有机会在这点上做得更好，可以借助性能工具。

Netflix的折中方案是，使用React在服务器端渲染登录页面，但同时也为注册过程的其他部分预取React代码。这不仅优化了首次加载性能，还优化了注册过程其余部分的加载时间，因为它是单页应用，所以有更大的JS包需要下载。

考虑一下，使用普通的JavaScript是否适合站点的流程。如果你确实需要使用库，那么尝试下只下传用户需要的代码。预加载技术可以帮助提高未来浏览页面的加载时间。

补充说明

查看英文原文：A Netflix Web Performance Case Study

相关推荐：

12 月 7 日北京 ArchSummit 全球架构师峰会上，来自Netflix的资深软件工程师Susheel Aroskar，将分享“Netflix API网关Zuul如何做到每秒处理两百万请求”内容，重点介绍重点介绍 Zuul 的核心架构，运维，以及未来的发展规划。详情点击 https://bj2018.archsummit.com/schedule

创作场景

Netflix 网页性能优化实践