前言
对于Web开发人员来说，如何衡量一个 Web 页面的性能一直是一个难题。
最初，我们使用 Time to First Byte、DomContentLoaded 和 Load 这些衡量文档加载进度的指标，但它们不能直接反应用户视觉体验。
为了能衡量用户视觉体验，Web 标准中定义了一些性能指标。
RAIL性能模型
RAIL是Response，Animation，Idle和Load的首字母缩写，是一种由Google Chrome团队于2015年提出的性能模型，用于提升浏览器内的用户体验和性能。
RAIL 模型的理念是”以用户为中心，最终目标不是让您的网站在任何特定设备上都能运行很快，而是使用户满意”。
网络异常，图片无法展示
|
- 响应（Response）：应该尽可能快速的响应用户, 应该在 100ms 以内响应用户输入。
- 动画（Animation）：在展示动画的时候，每一帧应该以 16ms 进行渲染，这样可以保持动画效果的一致性，并且避免卡顿。
- 空闲（Idle）：当使用 Javascript 主线程的时候，应该把任务划分到执行时间小于 50ms 的片段中去，这样可以释放线程以进行用户交互。
- 加载（Load）：应该在小于 1s 的时间内加载完成你的网站，并可以进行用户交互。
性能指标
基于用户体验的性能指标是 Google 在 web.dev 提出的。
测试工具
- Lighthouse: Optimize website speed | Chrome Developer
- WebPageTest
- Chrome DevTools
