前端性能优化

421 阅读3分钟

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属性的影响范围

浏览器渲染流程

  1. js:实现动画,操作dom等
  2. style:产出渲染树
  3. layout:盒模型确切的位置和大小
  4. paint:栅格化,把图形的位图信息上传到gpu,显示出来
  5. 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执行优化
  • 避免大型复杂的布局
  • 渲染层合并