浏览器前端性能优化RAIL
- 总结
- 和 05-3 白屏优化？ 一起记忆：白屏优化是从技术层面来指导优化方式；RAIL 是从用户体验来衡量优化方式
定义：RAIL 是一种用于衡量和优化 网页性能 的模型，是 Google 提出的一种以用户为中心的性能度量方法
RAIL = Response响应 + Animation动画 + Idle空闲 + Load加载
- Response：在 100ms 内响应用户输入，以提供即时的交互反馈
- 优化方法：减少主线程的工作负载，避免在主线程中执行耗时过长的任务，如复杂计算或大量 DOM 操作
- Animation：以每秒 60 帧（fps）的帧率运行动画，即每帧的渲染时间不超过 16.67ms（1000ms/60）
- 优化方法：① 利用 CSS3 动画和 Web Animations API 等硬件加速的动画技术，避免使用 JS 来实现复杂的动画效果，避免引起重排和重绘 ② 对于复杂的动画场景，可以使用
requestAnimationFrame方法来确保动画的流畅性，它会在浏览器下一次重绘之前调用回调函数，使动画与浏览器的渲染节奏保持一致
- 优化方法：① 利用 CSS3 动画和 Web Animations API 等硬件加速的动画技术，避免使用 JS 来实现复杂的动画效果，避免引起重排和重绘 ② 对于复杂的动画场景，可以使用
- Idle：利用页面空闲时间处理后台任务，如预取数据、加载非关键资源等
- 优化方法：使用
requestIdleCallback函数，它允许在浏览器空闲时执行低优先级的任务。可以将一些非紧急的操作，如数据统计、懒加载图片等放在requestIdleCallback的回调函数中执行
- 优化方法：使用
- Load：在 3 秒内完成页面的首次内容绘制 FCP
- 优化方法：① 优化资源加载顺序，优先加载关键资源，如 HTML、CSS 和关键的 JS 文件 ② 懒加载：对于图片和其他媒体资源，可以采用懒加载技术，只在用户需要查看时才加载 ③ 压缩和优化资源文件的大小，减少网络传输时间 ④ 利用浏览器缓存，设置合理的缓存策略，避免重复下载相同的资源
- 相关 - 白屏优化其实就是减少用户看到白屏的时间，和 Load 的 3秒 FCP 的目标一致