[译]Netflix的网络性能案例研究

大纲：网络性能优化没有灵丹妙药。简单的静态网页受益于服务器端渲染，只需很少的JavaScript代码。谨慎使用库可以为复杂的页面带来巨大的价值。Netflix是最受欢迎的视频流媒体服务之一。自2016年在全球推出以来，该公司已经看到许多新用户不仅通过移动设备注册，而且还通过不太理想的互联网连接注册。通过改进用于Netflix.com注册过程的JavaScript代码并使用预加载技术，开发团队能够通过多项改进为移动和桌面用户提供更好的用户体验。负载和交互时间减少50%（适用于Netflix.com桌面未登录主页）通过将React和其他客户端库切换为原生JavaScript，将包大小减少200KB。服务器端仍然使用React预取HTML、CSS和JavaScript(React)用于未来的操作将交互时间减少30%通过嵌入更少的代码减少交互时间Netflix开发人员优化性能的地方不登录主页，用户注册并在此页面上登录站点。新用户和注销用户的Netflix.com主页该页面最初包含300KB的JavaScript代码，其中一些是React和其他客户端代码（例如Lodash等工具库），还有一些HydrateReact的必要上下文数据状态。Netflix的所有网页均由服务于生成的HTML和客户端应用程序的服务器端React呈现，因此维护新优化主页的结构与维护一致的开发人员体验同样重要。主页选项卡是一个最初用React编写的组件示例。使用Chrome的DevTools和Lighthouse在3G网络下模拟加载一个未登录的主页，结果显示未登录的主页加载需要7秒。这次是针对一个简单的入口页面。时间太长了，所以我们开始调查改进的可能性。通过一些性能审计，Netflix发现他们的客户端JS开销过大。使用ChromeDevTools的网络速率限制功能检查Netflix.com未优化的性能。通过在浏览器中关闭JavaScript来观察站点中仍在运行的元素，开发团队可以决定在未登录的主页中是否真的需要React。由于页面中的大部分元素都是基本的HTML，剩下的JavaScript点击处理、添加类等元素都可以用原生JavaScript代替，而原来在页面上使用React实现的语言切换器用不到300行的原生JavaScript代码重写.结构。移植到原生JavaScript的完整组件列表：基本交互（主页中的选项卡）语言切换器Cookie横幅（针对非美国访问者）用于分析的客户端日志沙盒放置在iframe中）尽管React的初始代码只有45KB，去掉客户端的React、一些库和相应的App代码，JavaScript代码总量减少了200多KB。交互时间减少了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使用它来为后续页面预加载JavaScript和CSS包。注意：Netflix配置的HTTP响应标头禁止使用XHR缓存HTML（它们不缓存第二页的HTML）。链接预加载按预期工作，因为它适用于HTML，即使没有设置缓存。//创建一个新的XHR请求constxhrRequest=newXMLHttpRequest();//打开资源请求以“预取”//打开资源请求以“预取”xhrRequest.open('GET','../bundle.js'，真）；//发送！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。有关这些优化的更多详细信息，请观看TonyEdwards的精彩演讲：YouTube视频链接：youtu.be/V8oTJ8OZ5S0总结通过密切关注JavaScript开销，Netflix发现了改进交互时间的机会。要了解您的网站此时是否有机会做得更好，请转向您的性能工具。Netflix决定做出的权衡是使用React用于服务器呈现入口页面，同时还预取React和其上的其余注册过程代码。这优化了首次加载性能，同时还优化了其余注册流程的加载时间，因为它是一个单页应用程序，因此需要更大的JS包来下载。考虑使用本机JavaScript是否适合您网站的流程。如果您确实需要使用库，请尝试仅嵌入用户需要的代码。预加载技术可以帮助优化未来访问的页面加载时间。