前端性能优化之 Web 性能优化、性能指标和优化目标、RAIL 测量模型和常用的性能测量 APIs

一、Web 性能优化

1. 进行 Web 性能优化，因为性能是 Web 网站和应用的支柱，流量、搜索、转换率和用户体验的关系。
2. 寻找性能瓶颈，如下所示：

• 了解性能指标，多快才算快
• 利用测量工具和 APIs
• 优化问题，重新测量迭代

3. 移动端挑战多，如下所示：

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

二、性能指标和优化目标

1. 性能优化加载，如下所示：

• 理解加载瀑布图
• 基于 HAR 存储与重建性能信息
• 速度指数 Speed Index
• 重要测量指标，如 Speed Index、TTFB、页面加载时间和首次渲染

2. 性能优化响应，如下所示：

• 交互动作的反馈时间
• 帧率 FPS，如 60FPS
• 异步请求的完成时间

三、RAIL 测量模型

1. RAIL 测量模型，如下所示：

• Response 响应
• Animation 动画
• Idle 空闲
• Load 加载

2. RAIL 的目标是良好的用户体验成为性能优化的目标。
3. RAIL 评估标准，如下所示：

• 响应，处理事件应在 50ms 以内完成
• 动画，每 10ms 产生一帧
• 空闲，尽可能增加空闲时间
• 加载，在 5s 内完成内容加载并可以交互

4. 性能测量工具，如下所示：

• Chrome DevTools 开发调试、性能评测
• Lighthouse 网站整体质量评估
• WebPageTest 多测试地点、全面性能报告

5. 解读 WebPageTest 的报告，如下所示：

• waterfall chart 请求瀑布图
• first view 首次访问
• repeat view 二次访问

6. WebPageTest，如下所示：

• 在线进行网站性能分析
• 本地部署 WebPageTest 工具

7. 使用 Lighthouse 分析性能，如下所示：

• 通过 npm install -g lighthouse 命令下载 lighthouse
• 直接以 lighthouse 测试地址 就可以了，如 lighthouse http://www.baidu.com
• 测试成功后会生成一个文件保存在本地，直接打开就可以看到测试性能报告

8. 使用 Chrome DevTools 进行性能测试，如下所示：

• Audit(Lighthouse)
• Throttling 调整网络吞吐
• Performance 性能分析
• Netw