性能-RAIL
RAIL是一个以用户为中的性能模型, 它把用户的体验查分成几个关键点(例如atp, scroll, load), 并且帮助你定义好每一项的性能指标.
性能指标大致分为四点:
- Response: 响应
- Animation: 动画
- Idle: 闲置时间
- Load: 加载
性能感知
| 延迟时间 | 用户感知 |
|---|---|
| 0-16ms | 流畅 |
| 16-100ms | 基本流畅 |
| 100-1000ms | 感知到网站上有一些加载任务 |
| 1s - 10s | 失去耐心 |
| 10s more | 直接离开 |
Response: 事件处理需要在50ms以内
目标:
- 用户的输入到响应的时间不超过100ms
优化手段:
- 事件处理函数在50ms内完成, 考虑到idle task的情况, 事件会排队, 等待时间大概在50ms, 适用于click, toggle, starting animation等.
- 复杂的js计算尽可能放在后台, 比如web worker, 避免对用户输入造成阻塞
- 超过50ms的响应, 要及时提供反馈, 比如倒计时, 进度百分比等.
Animation: 在10ms内产生一帧
目标:
- 产生每一帧的时间不要超过10ms, 为了保证浏览器60帧, 每一帧的时间再16ms左右, 但浏览器需要用6ms来渲染每一帧
- 旨在视觉上的平滑. 用户对帧率的感知是很敏感的.
优化手段:
- 在一些高压点上, 比如动画, 不要去挑战cpu, 尽可能的少做事, 比如取style, 取offset等操作.
- 在渲染性能上, 针对不同的动画做一些特定的优化
动画不仅仅是UI的视觉效果, 以下的行为都属于:
- 视觉动画, 渐隐渐显, loading, tweens等
- 滚动, 包含弹性滚动等
- 拖拽, 缩放等用户行为
Idle: 最大化利用空闲时间
目标:
- 最大化空闲时间, 以增大50ms内响应用户输入几率
优化手段:
- 利用空闲时间来完成一些延后的工作, 比如先加载页面的可见部分, 然后利用空闲时间加载剩余部分
- 在空闲时间内执行的任务尽量控制在50ms以内
- 如果用户在空闲时间进行交互, 需要侦听空闲时间的任务
Load: 传输内容到页面可交互的时间不超过5s
目标:
- 优化加载速度, 可以根据设备, 网络等条件. 目前, 比较好的一个标准是: 你的页面在一个中配的3g网络手机上打开时间不超过5s
- 对于第二次打开, 尽量不超过2s
优化手段:
- 在手机设备上测试加载性能, 选中配的3g网络(400kb/s, 400ms RTT), 可以使用webpagetest来测试
- 注意, 即便是4g网络, 由于网络波动, 也可能会比预期的加载更慢
- 禁用渲染阻塞的资源, 延后加载
- 可以采用lazy-load, code-splitting等其他优化手段