关于前端:奈飞Web性能优化

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?

1. 从 FCP(First Contentful Paint) 开始。
2. 从 FCP 向后查找是否有 5s 的静默窗口，静默窗口的定义是: 没有长工作，处于 pending 中的 GET 申请不超过 2 个。
3. 从静默窗口开始向前查找查找，查找到的第一个长工作的。如果找不到长工作，则到 FCP 为止。
4. 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?

1. Chrome 用户体验报告
2. 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%

其余

1. Netflix 思考应用 Preact（一个类 React 的库），代替 React。对于简略的页面，应用 Vanilla JS 是更简略的抉择
2. Netflix 尝试 Service Workers 进行动态资源的缓存

原文

• A Netflix Web Performance Case Study

参考

• metrics
• lighthouse