Tim的资源站

一、寻找性能瓶颈

1. 了解性能指标
   多块才算快啊，不能凭感觉，需要有指标进行客观的衡量。
2. 利用测量工具和APIs
3. 优化问题，重新测量并迭代

性能问题主要分为两个方面：
一个是网络加载，另一个是加载完成后的交互响应。
任何性能指标与工具最终都会落脚在这两点上，做性能优化也应该从两个方向入手。
网络加载可以参考 Chrome Dev Tools 中的 Network、Light House相关的指标。
而交互响应需要参考的是：

1. 交互动作的反馈时间
2. 画面帧率要到达 60 FPS
3. 异步请求的完成时间最好不要超过 1s，如果超过最好是做个加载动效。

关于性能优化，还可以参考 Google RAIL 测量模型。RAIL 是指以下四个方面：

1. Response，指的是给用户的响应体验，最好是在 50 ms 之内完成。
2. Animation，指的是动画是否流畅，主要看帧率，每 10 ms 产生一帧。
3. Idle，指的是主线程的空闲时间，与 Response 相呼应，主线程是否空闲直接影响到用户响应体验，要尽可能增加空闲时间。
4. Load，指的是网络加载，在 5s 内完成内容加载并可以交互。

二、移动端挑战多

1. 设备硬件、屏幕尺寸、交互方式、网速
2. 用户更缺少耐心，＞3秒加载导致53%的跳出率（bounce rate）
3. 持续增长的移动用户和移动电商业务

三、性能指标和优化目标

（一）Chrome Dev Tools

Network

1. requests（总请求数）
2. transferred（传输量）
3. resources（总资源数）
4. Finish（总加载时间）
5. DOMContentLoaded
   HTML文件加载并解析完毕触发
6. Load
   所有资源加载完毕，与 DOMContentLoaded的区别是，需要等待图片、Scripts、CSS等资源全部加载完毕。

Network waterfall 以及 timing（加载瀑布流）

waterfall 主要是看所有资源的加载情况，并行数、以及是否阻塞。
timing 是具体某个资源的加载时间：

1. Queueing（排队），出现以下情况时会进行排队：
   • 存在高优先级的请求
   • 该请求所处的域已经存在 6 个 TCP 连接（HTTP1.0/1.1）
   • 浏览器正在磁盘缓存中短暂分配空间
2. Stalled（暂停），出现 Queueing 中任何一种情况都会暂停。
3. DNS 查找，浏览器查找该请求的目标 IP 地址。
4. Initial connection（初始化连接）。浏览器正在建立连接，包括：TCP 握手/重试和协商SSL。
5. Proxy negotiation（代理协商），浏览器与代理服务器进行请求协商。
6. Request sent（发起请求）
7. ServiceWorker preparation（准备 Service worker）
8. Request to ServiceWorker（请求到 Service worker）
9. Waiting（TTFB）。浏览器正在等待响应的第一个字节。TTFB是指
   Time to first byte。这个时间包括一次请求与响应的往返延迟以及服务器准备响应需要的时间。这是一个非常关键的指标，可以用来衡量服务端性能。
10. Content Download，浏览器正在接收响应。
11. Receiving Push。浏览器正在接收基于 HTTP/2 的服务器端推流。
12. Reading Push。浏览器正在读取之前接收到的本地数据。

Performance

Performance 主要用来衡量页面运行时的性能，对应于 RAIL 模型，它有助于分析 Response、Animation 以及 Idle。

下面简单说一下，Performance 报告的解读：

1. Frames，反映了测试期间的帧率。
2. Experience，主要衡量 Layout Shift，这会影响到用户体验。
3. Main，主要说明主线程这段时间所处理的任务，以及所花费的时间比重，空闲时间等等。

Lighthouse

Lighthouse 是一款 web 应用和网站的综合性能衡量工具，并给出一些优化建议。

它可以在 Chrome 中使用，也可以通过 npm 包安装。

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse

它主要在 5 个方面给出评分和建议。

Performance 相关的指标

1. First Contentful Paint
   这个指标表明第一帧有内容的画面所花费的时间，比较关键。

2. Time to Interactive
   截止到可响应用户交互所花费的时间。

3. Speed Index
   关于网站速度的综合衡量指标。

4. Total Blocking Time
   First Contentful Paint 与 Time to Interactive 之间所花费的时间。

5. Cumulative Layout Shift（CLS）
   主要用来衡量视口内可见元素位置的意外改变，这会影响到用户体验。

6. Largest Contentful Paint
   内容最多的一帧所花费的时间。

Accessibility（可访问性）

主要包括导航、对比度、国际化和本地化、标签语义化等等

Best Practice（最佳实践）

主要包括安全、用户体验以及一些一般意义上的建议。

SEO 与 PWA

这两项主要针对 SEO 和 PWA 给出一些衡量与优化建议。

（二）WebPageTest

可以设置测试地点，获得一个全面性能报告。

通过 webpagetest.org 访问使用，也可以进行本地部署 。

WebPageTest 工具重点关注以下几个方面：

1. waterfall chart 请求瀑布图
2. first view 首次访问
3. repeat view 二次访问

（三）Web 标准 APIs

1. 关键时间节点（Navigation Timing，Resource Timing）
2. 网络状态（Network APIs）
3. 客户端服务端协商（HTTP Client Hints）
4. 网页显示状态（UI APIs）