01 使用RAIL模型评估性能
以 用户为中心 的性能模型,每个网络应用都具有与其生命周期有关的四个方面,而且这些方面以不同的方式影响着性能。
延迟与用户反应
响应:50ms处理事件
01 目标
在100ms内响应用户输入
02 指导
1.50ms内处理用户输入事件,确保100ms反馈用户可视的响应
2.对于开销大的任务可分隔任务处理,或放到 worker 进程中执行,避免影响用户交互
3.处理时间超过 50ms 的操作,始终给予反馈(进度和活动指示器)
50 ms or 100ms
动画:10ms一帧
01 目标
(1) 10ms或更短的时间内生成一帧
10ms = (1000ms/60 帧 = 16.66ms) - 6ms(渲染帧的预算)
(2)视觉平滑
02 指导
在动画这样的高压点,尽量不要处理逻辑,提高达到60fps的机会
动画类型:
(1)滚动。包括甩动,及用户开始滚动,然后放开,页面继续滚动。
(2)视觉动画。包括入口和出口、补间和加载指示器。
(3)拖拽动画通常跟随用户交互。包括地图平移和缩放。
空闲时间最大化
01 目标
最大化空闲时间以增加页面在100ms内响应用户输入的几率
02 指导
利用空闲时间完成推迟的工作
空闲时间期间用户交互优先级最高
加载:5s呈现交互内容
01 目标
(1)首屏加载连接3G缓慢的中档移动设备5s内呈现可交互内容
(2)非首屏加载应该在2s内完成
02 指导
(1)测试用户常用设备和网络连接情况的性能
(2)优化关键渲染路径以解除阻止渲染
(3) 启动渐进式渲染和在后台执行一些工作(网络速度、硬件cpu、解析JavaScript)
关键指标
01 响应:在100ms内响应用户输入
02 动画: 动画或滚动时,10ms产生一帧
03 空闲时间: 主线程空闲时间最大化
04 加载: 在1000ms内呈现交互内容
05 以用户为中心
02评估性能的工具
Lighthouse
webPageTest
Chrome DevTools
浏览器渲染场景
浏览器渲染流程
JavaScript(实现动画、操作DOM)
Style(Render Tree)
Layout(盒模型,确切的位置和大小)
Paint(栅格化)
Composite(渲染层合并)
性能优化方向
01 加载
(1)资源效率优化
(2)图片优化
(3)字体优化
(4)关键渲染路径优化
02 渲染
(1)JavaScript执行优化
(2)避免大型复杂的布局
(3)渲染层合并