浏览器渲染流程

JavaScript -> Style -> Layout -> Paint -> Composite

  • 浏览器构建对象模型
    • 构建 DOM

HTML -> DOM

  • 构建 CSSOM

CSS -> CSSOM

  • 构建渲染树

    布局（layout）与绘制（paint）

  • 渲染树只包含页面需要的节点
  • 布局计算每个节点精确的大小与位置-“盒模型”
  • 绘制是像素化每个节点的过程

影响回流（再次布局）的操作

  • 添加与删除节点
  • display: none
  • 移动元素位置
  • 操作 styles
  • offsetLeft, scrollTop, clientWidth
  • 修改浏览器大小，字体大小

避免 layout thrashing（布局抖动）

避免回流（reflow）

  • 使用 transform 替代会导致回流的操作

image.png

读写分离

  • 批量处理
    • React VDOM，数据批量处理后再更新视图
    • fastdom
      • 读操作放入 fastdom.measure 方法中
      • 写操作放入 fastdom.mutate 方法中

复合线程（compositor thread）与图层（layers）

复合线程

  • 将页面拆分图层进行绘制再进行复合
  • 利用 DevTools 了解网页的图层拆分情况
    • 图层拆分粒度要适中
  • 哪些样式仅影响复合

减少重绘（repaint）

  • 利用 DevTools 识别 paint 瓶颈
  • 利用 will-change 创建新的图层

高频事件处理函数的防抖

一帧的生命周期

image.png

React 时间调度实现

基本原理

  • requestIdleCallBack，但有兼容性问题
  • 通过 rAF 模拟 rIC

image.png
image.png