COOLFE

年轻人,好好努力吧

05 1 2021

渲染优化

每 100 ms 延迟导致 1% 的销量损失

移动端 > 3s 加载导致 53% 跳出率(bounce rate)

加载优化

  • Network - Waterfall (瀑布流) - Waiting (TTFB time to first byte)
    • 请求发出到响应回来的时间
    • 网站的速度速度和这个时间有大关系
    • 影响因素:后台的处理能力、 网络因素、 下载时间
  • Network - DOMContentLoaded Dom 页面加载完成时间
    • Network - Load 总资源加载时间
  • Lighthouse - Speed Index 速度指数 一般为 4s
  • Lighthouse - First Content Paint 首次渲染时间

响应优化

  • 交互动作的反馈时间
    • 例如鼠标移上去一级菜单立马出现二级菜单
  • FPS 帧率
    • 不低于 60 fps,一秒达到 60 帧,大概一帧 16 ms,浏览器绘制帧大概 6ms
    • 所以动画最好每 10ms 产生一帧
    • ctrl + shift + P
    • show frames per second (FPS) meter
  • 异步请求的完成时间
    • 一秒以内完成,不能完成就加 loading 动画

RAIL 测量模型

  • Response 响应
    • 处理时间应在 50ms 以内完成
    • 在 5s 内完成内容加载并可以交互
  • Animation 动画
  • Idle 空闲
    • 尽可能增加空闲时间
  • Load 动画
    • 每 10ms 产生一帧

性能测量工具

  • Chrome Devtools 开发调试、性能评测
    • Performance monitor (ESC 快捷调出)
    • 可以看到当前 CPU 状态、堆状态
    • Request blocking (ESC 快捷调出)
    • 可以模拟阻断资源加载,可以用来测试资源是否必须首屏加载
    • Rendering (ESC 快捷调出)
    • 重绘区域会以绿色标记出来
  • Lighthouse 网站整体质量评估
    • npm install -g lighthouse
    • lighthouse https://www.taobao.com
  • WebPageTest 多测试地点、全面性能报告
    • https://webpagetest.org/
    • waterfall chart 请求瀑布图
    • first view 首次访问
    • repeat view 二次访问
    • 本地部署
    • docker pull webpagetest/server
    • docker pull webpagetest/agent
    • docker run -d -p 4000:80 webpagetest/server
    • docker run -d -p 4001:80 --network="host" -e "SERVER_URL=http://localhost:4000/work/" -e "LOCATION=Test" webpagetest/agent
    • 通过 http://localhost:4000/ 访问

性能测量工具 APIs

  • 关键时间节点(Navigation Timing, Resources Timing)
  • 网络状态(Network APIs)
    • navigator.connection || navigator.mozConnection
  • 客户端服务器协商(HTTP Client Hints) & 网页显示状态(UI APIs)

渲染原理

  • 关键渲染路径(critical rendering path)
    • 浏览器构建对象模型
    • 构建 DOM 对象
      • HTML -> DOM
    • 构造 CSSOM 对象
      • CSS -> CSSOM
    • 浏览器构建渲染树
    • DOM + CSSOM = Render Tree
    • 浏览器的渲染过程
    • Javascript -> Style -> Layout(布局) -> Paint(绘制) -> Composite(复合)
  • 布局和绘制
    • 渲染树只包含网页需要的节点
    • 布局计算每个节点精确的位置和大小 - 盒模型
    • 绘制是像素化每个节点的过程
  • 影响再次布局(回流)的操作
    • 添加/删除元素
    • 操作 Styles
    • display:none
    • offsetLeft, scrollTop, clientWidth, scroll
    • 移动元素位置
    • 修改浏览器大小,字体大小
  • 复合线程(compositor thread)
    • 作用
    • 将页面拆分图层进行绘制再进行复合
    • 利用 devTools 了解网页的图层拆分情况
    • 样式只影响复合,不触发布局和重绘
    • Postition
      • transform: translate(npx, npx)
    • Scale
      • transform: scale(n)
    • Rotation
      • transform: rotate(ndeg)
    • Opacity
      • opacity: 0...1
  • 图层(layers)
    • ctrl + shift + p - show Layers

渲染优化

小技巧

  • 确认资源是否必须
    • ctrl + shift + p - Show Request Blocking
    • 添加规则
  • compression 库工具可以让请求资源压缩
  • willChange: 'transform' 可以让浏览器把这个元素提取到单独图层 frameLife