前端性能优化-RAIL
# Response: 事件处理最好在 50ms 内完成
# 目标
- 用户的输入到响应的时间不超过 100ms
# 优化方案
- 事件处理函数在 50ms 内完成，考虑到 idle task 的情况，事件会排队，等待时间大概 50ms。适用于 click,toggle,starting animations 等，不适应于 drag 和 scroll
- 复杂的 js 计算尽可能放在后台，如 web worker，避免对用户输入造成阻塞
- 超过 50ms 的响应，一定要提供反馈，如倒计时，进度百分比等
# Animation: 在 10ms 内产生一帧
# 目标
- 产生每一帧的时间不要超过 10ms，为保证浏览器 60 帧，每一帧的时间在 16ms 左右，但浏览器需 6ms 渲染每一帧
- 旨在视觉平滑
# 优化方案
- cpu 尽可能地少做事，如取 offset,设置 style 等操作。尽可能保证 60 帧体验
- 在渲染性能上，针对不同动画做一些特定优化
# Idle: 最大化空闲时间
# 目标
- 最大化空闲时间，以增大 50ms 内响应用户输入的几率
# 优化方案
- 用空闲时间来完成一些延后的工作，如先加载页面可见的部分，然后利用空闲时间加载剩余部分requestldleCallback (opens new window)
- 在空闲时间内执行的任务尽量控制在 50ms 内，如果更惨，会影响 input handle 的 pending 时间
- 若用户在空闲时间任务进行时进行交互，必须以此为最高优先级，并暂停空闲时间的任务
# Load: 传输内容到页面可交互的时间不超过 5s
# 目标
- 优化加载速度，可根据设备、网络等条件。如用户在 3G 网络手机上打开页面时间不超过 5s
- 对于第二次打开，尽量不超过 2s
# 优化方案
- 在手机设备上测试加载性能，选用中配的 3G（400kb/s,400ms RTT）网络,可使用WebPageTest (opens new window)来测试
- 即使用户使用的是 4G，也会有丢包或网络波动的情况，可能会比预期的更慢
- 可采用lazy load (opens new window),code-splitting (opens new window)等其他优化 (opens new window)手段，让第一次加载的资源更少
# 分析 RAIL 的工具
上次更新: 2021/04/22, 13:38:59