Netflix Web 性能案例研究

Posted 2022-11-28 YITA90

对于网页性能来说，没有完美的解决方案。简单的静态页面可以通过精简 javascript 代码，进行服务端渲染来提高效率。复杂页面可以通过引用库，来提高。

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

通过改进用于 Netflix.com 注册流程，使用预请求 JavaScript 的技术，开发人员团队能够为移动和桌面用户提供更好的用户体验，下面是几点提升。

• 加载和交互时间减少了 50％（针对Netflix.com的未登录首页）
• 将 React 和其他客户端代码库换成 vanilla JavaScript 后，JavaScript 包大小减少了 200kB。 服务器端仍然使用React。
• 通过预请求 html, CSS, Javascript(React) 为下次跳转做准备，使得可交互等待时间缩短 30%。

通过减少 Javascript 来优化可交互时间

下图是改版后的 Netflix 用户登出界面，同时用户也可以选择登录或注册。

Netflix 登出或新用户注册界面

该页面最初包含 300kB 的 JavaScript，其中一些是 React 和其他客户端代码（例如 Lodash之类的实用代码库），还有一些是用于补充 React状态所需的上下文数据。

Netflix 所有页面都由服务器端渲染，使用 React 生成的 HTML 页面，提供客户端应用服务。所以优化后的新页面也应该和之前整体保持一致，便于开发维护。

首页选项卡是最初使用 React 编写的组件

使用 Chrome 的 DevTools 和 Lighthouse 来模拟在 3G 网络下加载的未登录首页页面显示未登录首页需要7秒才能加载完成。对于一个简单的落地页来说，太慢了，因此调查了是否有改进空间。通过一些性能检测，Netflix 发现他们的客户端 JS 网络花销很高。

在Chrome DevTools中对优化前的 Netflix.com 进行网络限制

通过在浏览器中关闭 JavaScript 并观察网站的哪些元素仍然可以运行，开发人员团队提出疑问，在未登录首页React的使用是否真的有必要。

由于页面上的大多数元素都是基本 HTML，其余元素类似JavaScript单击处理和类添加等，完全可以用纯 JavaScript 替换。使用原生 Javascript 构建代替最初的 React 之后，代码量减少了 300 行。

使用 vanilla JavaScript 的完整组件包括：

• 基本交互（主页中间的Tab切换）
• 切换语言
• Cookie banner（适用于非美国访问者）
• 用于分析的客户端日志记录
• 性能测试和记录
• Ad attribution pixel bootstrap code（为了
  安全起见，隐藏在iFrame中）
  

尽管 React 的初始占用空间仅为45kB，但移除了React，客户端的几个库和相应的应用程序代码将 JavaScript 总量减少了 200kB 以上，使得 Netflix未登录首页在交互时间缩短了50％以上。

在删除客户端React，Lodash和其他库之前和之后的有效加载比较

在实验室环境中，使用 Lighthouse（跟踪）快速与Netflix主页模拟用户进行交互。桌面可交互的时间 TTI < 3.5s。

Lighthouse 显示的优化后的性能报告

其他指标怎么样？使用 Chrome 用户体验报告，我们可以看到首次输入延迟  - 从用户首次与您的网站互动的时间到浏览器实际上能够响应该互动的时间 - 比 PC 端 97％的 Netflix 用户时间快。这很棒。

第一输入延迟（FID）衡量用户与页面交互时的延迟。

React 预请求后续页面

为了在进入未登录首页时进一步提高性能，Netflix 利用用户在目标网页上花费的时间来预判断用户可能点击的下一页的资源。

这是通过使用两种技术实现的 - 内置的 <link rel = prefetch> 浏览器API和XHR预请求。

内置浏览器API由页面头标记中的简单链接标记组成。它向浏览器建议可以预请求资源（例如HTML，JS，CSS，图像），部分浏览器 不支持，所以并不能保证浏览器实际上会预取资源。

预请求前后对比图

另一方面，多年来， XHR 预请求一直是浏览器标准，当 Netflix团队使用浏览器缓存资源后，其成功率达到 95％。虽然XHR预请求不能用于请求 HTML 文档，但 Netflix使用它来为后续页面预请求 JavaScript 和 CSS包。

注意：Netflix的HTTP响应头配置阻止了使用XHR的HTML缓存（它们在第二页的 HTML 上没有缓存）。但是链接预请求是可以按预期工作的。 即使在 HTML上没有缓存，对 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。

有关这些优化的更多详细信息，请参阅 Tony Edwards 的A +演讲：

视频地址：https://youtu.be/V8oTJ8OZ5S0

结论

Netflix 通过密切关注 JavaScript 的花销，发现了优化可交互时间的方式。你可以使用优化工具来检查你的网站是否有类似问题。

Netflix做出的决策是使用 React 对登陆页面进行服务器渲染，同时也预请求React/其余注册流程的代码。因为它是单页应用程序，需要下载更大的 JS 包。这样可以优化首次加载性能，还可以优化其注册流程的加载时间。

在您网站中您也可以考虑使用 vanilla JavaScript。如果您需要使用库，可以只使用您用户需要用到的部分代码。像预请求这种技术可以帮助提升跳转页面的加载时间。

补充说明

• Netflix 考虑过使用 Preact，但是低交互性的页面，使用vanilla JavaScript更合适。

• Netflix 尝试使用Service Workers进行静态资源缓存。当时，Safari 不支持API（现在已经支持了）。Netflix 注册流程页需要兼容旧版浏览器。我们有大量的用户使用旧版浏览器进行注册，尽管在其原生移动应用或电视设备上观看 Netflix。

• Netflix 的登录页面是相对复杂的。所以在注册流程中进行过最严格的 A / B 测试。采用了根据位置，设备类型和许多其他因素自定义消息和图像的机器学习模型。在近200个国家的支持下，每次扩展，产品都面临着不同的本地化，法律和价值信息的挑战。有关 A / B 测试的更多信息，请参阅 Ryan Burgess 测试更好的用户体验。

感谢 Netflix UI 工程师，Tony Edwards，Ryan Burgess，Brian Holt，Jem Young，Kristofer Baxter（Chrome），Nicole Sullivan（Chrome） 和 Houssein Djirdeh（Chrome） 的评论和贡献。

原文链接：https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9