1. 缩小javascript的大小
最后的页面（登记状态的首页）蕴含了300kb的JavaScript，蕴含了React以及Lodash等库。应用Chrome模仿3G链接，加载工夫为7s。
因为页面是由简略的HTML元素组成的，React不在是必要的，奈飞团队应用原生javascript对页面进行了重构。在删除了React和几个库后，javacript大小缩小了200kb以上。缩短了50%的TTI工夫。
应用Lighthouse测试奈飞的主页，TTI工夫小于3.5s
97%的用户的FID的工夫也很短
???? 名词注解
更多的Web性能指标的阐明，我会独自另开一篇文章，这里只提及文章中所提及的
Lighthouse
Lighthouse是开源的提供网页品质的自动化工具，Lighthouse能够通过作为Chrome的扩大程序运行，也能够通过命令行运行。
点击 Generate report 开始进行测试
TTI
Time to Interactive, 从页面开始加载开始到其次要的子资源加载结束之间的工夫，优良的TTI工夫该当小于5s。
如何计算TTI?
- 从FCP(First Contentful Paint)开始。
- 从FCP向后查找是否有5s的静默窗口，静默窗口的定义是: 没有长工作，处于pending中的GET申请不超过2个。
- 从静默窗口开始向前查找查找，查找到的第一个长工作的。如果找不到长工作，则到FCP为止。
- TTI的工夫，是静默窗口向前查找到第一个长工作的完结的工夫。如果没有长工作，则是FCP的工夫。
下图????，是上述过程的图解
Long Tasks, 长工作，指的所有执行工夫超过50ms的工作
SSR与TTI
SSR技术缩短了网页的FCP工夫（因为html曾经在服务端渲染好了，只需到客户端水合）。然而SSR可能会导致TTI工夫增长，因为FCP的工夫被提前了，然而水合还是须要加载一遍javascript文件。咱们该当减小FCP与TTI之间的时长，必要时能够明确告知用户资源没有加载实现，防止用户工作页面没有响应。
如何测量TTI
能够应用Lighthouse工具测量
FCP
First Contentful Paint, 从页面开始加载到屏幕上出现页面内容（任意局部）的工夫。内容指：文本，图像，背景图片，svg和非空白的canvas元素。
如何测量FCP?
- Chrome用户体验报告
- Lighthouse
应用JS测量FCP
最简略的应用办法是应用web-vitals库
import { getFCP } from 'web-vitals';getFCP(console.log);FID
First Input Delay, 用户第一次与页面进行交互（点击按钮，或者）到浏览器相应交互的工夫。优良FID该当小于100ms。
当浏览器的主线程忙于其余操作时，就会产生"输出提早"。比方当浏览器在解析执行大型的js文件时，浏览器无奈运行任何事件监听器，这个时候如果用户点击按钮，就造成了"输出提早"。
上图中黄色的局部代表的是，主线程正在繁忙的状态。在页面FCP之后，TTI之前（页面看上去如同是能够交互的状态，然而资源尚未加载实现），可能会呈现工夫较长的“输出提早”。如果用户在最长的黄色区块左近与页面产生了交互，就会产生较长的FID。
如何测量FID？
能够应用Chrome用户体验报告，或者web-vitals库
import { getFID } from 'web-vitals';getFID(console.log);2. 预读取React用于后续页面
为了进步下一个页面的性能，咱们能够在以后页面预取资源，能够通过两种技术实现。应用 <link rel=prefetch>， 或者XHR预取。
<link rel=prefetch>预取的形式，不能保障浏览器会预取，并且有的浏览器不兼容。
// XHR预取的示例const xhrRequest = new XMLHttpRequest（）;xhrRequest.open（'GET'，'../bundle.js'，true）;xhrRequest.send（）;通过预取，TTI工夫缩小了30%
其余
- Netflix思考应用Preact（一个类React的库），代替React。对于简略的页面，应用Vanilla JS是更简略的抉择
- Netflix尝试Service Workers进行动态资源的缓存
原文
- A Netflix Web Performance Case Study
参考
- metrics
- lighthouse