360前端星计划day4
使用RAIL模型评估性能
以用户为中心的性能模型,把用户体验分成四个方面
- Response
- Animation
- Idle
- Load
延迟与用户反应
- 0-16ms:感知平滑动画转场
- 16-100ms:认为可以立即获得结果
- 1s:1s内正常,大于1s会转移注意力
RAIl目标
在100ms内响应用户输入
RAIL指导
- 50ms内处理用户输入事件,确保100ms内反馈用户可视的响应
- 对于开销大的任务可分隔任务处理,或放到worker进程中执行,避免影响用户交互
- 处理时间超过50ms的操作,始终给予反馈(进度和活动指示器)
动画
目标:
- 10ms或更短的时间生成一帧
- 视觉平滑
指导
- 在动画这样的高压点,尽量不要处理逻辑
- 动画类型:
- 滚动
- 视觉动画
- 拖曳动画,跟随用户交互,比如地图平移和缩放
空闲时间最大化
目标
最大化空闲时间以增加页面在100ms内响应用户输入的几率
指导
- 利用空闲时间完成推迟的工作,比如预加载数据
- 空闲时用户交互优先级最高
加载
目标:
- 首屏加载连接3G缓慢的中档移动设备5s内呈现可交互内容
- 非首屏加载应该在2s内完成
指导
- 测试用户常用设备和网络连接情况的性能
- 优化关键渲染路径以解除阻止渲染(优先加载和用户当前操作相关的内容)
- 启用渐进式渲染和在后台执行一些工作
- 影响加载性能的因素:网络速度、硬件、解析JavaScript
RAIL关键指标总结
- 响应:在100ms内响应用户输入
- 动画:动画或滚动时,10ms产生一帧
- 空间时间:主线程空闲时间最大化
- 加载:在1s内呈现交互内容
- 以用户为中心
评估性能的工具
Lighthouse
开发者工具中的Audits:给出评分和优化建议
WebPageTest
输入网站地址,在服务端使用终端模拟器审计性能发回报告
Chrome DevTools
- Console:控制台,打印信息
- Elements:元素面板,元素布局情况
- Sources:资源的代码
- Network:显示网络请求和静态文件的时序
- Performance:性能
- screenshots录制
- Main部分可以看到每个task的步骤
- summary可以看到任务发生的具体情况,可以链接到源文件
- Memory:内存
- Application:存储,storage和service worker等
- Audits:审计
浏览器渲染相关
浏览器渲染场景
- JS/CSS -> 计算样式 -> 布局 -> 绘制 -> 渲染层合并
- JS/CSS -> 计算样式 -> 绘制 -> 渲染层合并
- JS/CSS -> 计算样式 -> 渲染层合并
csstriggers.com 可以查看CSS属性的影响范围
浏览器渲染流程
- js:实现动画,操作dom等
- style:产出渲染树
- layout:盒模型确切的位置和大小
- paint:栅格化,把图形的位图信息上传到gpu,显示出来
- composite:渲染层合并(渲染层不是单独的图形层的情况,寻找祖先节点,和祖先节点公用图形上下文,合并到一个图形层,然后上传位图信息并显示)
一些注意的点
- 不要在设置样式之后读取属性
//推荐
const offsetTop = parseInt(m.style.top.slice(0,-2));
//不推荐,会强制布局
const offsetTop = m.offsetTop;
- 采用transform的方式移动元素
m.style.transform = `translateY(${pos - m.style.top.slice(0,-2)}px)`;
性能优化的方向
加载:
- 资源效率优化(压缩、缓存)
- 图片优化
- 字体优化
- 关键渲染路径优化
- 关键资源: 可能阻止网页首次渲染的资源。
- 关键路径长度: 获取所有关键资源所需的往返次数或总时间。
- 关键字节: 实现网页首次渲染所需的总字节数
渲染
- JavaScript执行优化
- 避免大型复杂的布局
- 渲染层合并