RAIL performance model
System should feel lightweight and responsive. 用于保证人机交互的友好性。
RAIL 模型 https://developers.google.com/web/fundamentals/performance/rail
一种以用户为中心的性能模型
| RAIL 步骤 | 关键指标 | 用户操作 |
|---|---|---|
| 响应 response | 输入延迟时间（从点按到绘制）小于 100 毫秒。 | 用户点按按钮（例如打开导航） |
| 动画 animation | 每个帧的工作（从 JS 到绘制）完成时间小于 16 毫秒。 | 用户滚动页面，拖动手指（例如，打开菜单）或看到动画。 拖动时，应用的响应与手指位置有关（例如，拉动刷新、滑动轮播）。 此指标仅适用于拖动的持续阶段，不适用于开始阶段。 |
| 空闲 idle | 主线程 JS 工作分成不大于 50 毫秒的块 | 用户没有与页面交互，但主线程应足够用于处理下一个用户输入。2 |
| 加载 load | 页面可以在 1000 毫秒内就绪。 | 用户加载页面并看到关键路径内容。 |
Chrome DevTools
Performance (原Timeline)和 Memory (原Profile)工具用于记录用户操作和分析性能。
Chrome DevTools 使用详解: https://segmentfault.com/a/1190000007877846
Chrome DevTools（Chrome 开发者工具） 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。
Chrome 金丝雀版本（Chrome Canary）可以获得最新版本的 DevTools
访问 DevTools
- 选择右上角Chrome 菜单，然后选择更多工具 -> 开发者工具
- 右键，选择检查/审查元素
快捷键打开：
- Ctrl + Shift + I, F12 / Cmd + Opt + I，打开 DevTools
- Ctrl + Shift + J / Cmd + Opt + J，打开 DevTools，并且定位到控制台面板
- Ctrl + Shift + C / Cmd + Opt + C，打开 DevTools，并且开启审查元素模式（相当于点击了 DevTools 左上角的图标）
其他常用快捷键：
- F5, Ctrl + R / Cmd + R，刷新页面
- Ctrl + F5, Ctrl + Shift + R / Cmd + Shift + R，刷新页面并忽略缓存
- Ctrl + ‘+’ / Cmd + Shift + ‘+’，放大 DevTools
- Ctrl + ‘-‘ / Cmd + Shift + ‘-‘，缩小 DevTools
- Ctrl + 0 / Cmd + 0，DevTools 恢复大小
涉及太多前端，放弃使用。