当渲染树中的元素尺寸，结构或属性发生改变时，需要浏览器重新渲染的过程称为回流( reflow )，而当渲染树中元素样式的改变，并不影响布局时，浏览器重新绘制它的过程称为重绘( repaint )

DOM 树与渲染树

DOM 树是包含了所有 HTML 节点的树，渲染树是 DOM 树和 CSSOM 树组合而成的，最终渲染在页面上的树。DOM 树和渲染树都是浏览器生成的。

帧数

一般浏览器的刷新率为 60HZ，即 1 秒钟刷新 60 次。

1000ms / 60hz = 16.6 ，也就是大概每过 16.6ms 浏览器就会渲染一帧画面。

浏览器对每一帧画面的渲染工作都要在 16ms 内完成，超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。

简单概括下，浏览器在每一帧里会依次执行以下这些动作：

  • JavaScript：JavaScript 实现动画效果，DOM 元素操作等。
  • Style（计算样式）：确定每个 DOM 元素应该应用什么 CSS 规则。
  • Layout（布局）：计算每个 DOM 元素在最终屏幕上显示的大小和位置。由于 web 页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫 reflow。
  • Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。
  • Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。

减少或者避免 layout，paint 可以让页面减少卡顿，动画效果更加流畅。

浏览器渲染过程

  1. 处理 HTML 标记并构建 DOM 树。
  2. 处理 CSS 标记并构建 CSSOM 树。
  3. 将 DOM 与 CSSOM 合并成一个渲染树。
  4. 根据渲染树来布局，以计算每个节点的几何信息。
  5. 将各个节点绘制到屏幕上。

图例

Image

构建渲染树过程

  1. 从 DOM 树的根节点开始遍历每个可见节点。

    • 某些节点不可见（例如脚本标记、元标记等），因为它们不会体现在渲染输出中，所以会被忽略。
    • 某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略。例如，图中的 span 节点不会出现在渲染树中，因为有一个显式规则在该节点上设置了“display: none”属性。
  2. 对于每个可见节点，为其找到适配的 CSSOM 规则并应用它们。
  3. 发射可见节点，连同其内容和计算的样式。

引起回流和重绘

常见的引起回流操作：页面首次渲染，窗口大小改变，元素尺寸大小改变，元素内容变化，添加或删除可见的 DOM 元素等

常见的引起重绘操作：改变颜色，改变背景颜色，visibility 隐藏显示等

注意

回流一定会引起重绘，而重绘不一定会引起回流

请注意 visibility: hidden 与 display: none 是不一样的。前者隐藏元素，但元素仍占据着布局空间（即将其渲染成一个空框），而后者 (display: none) 将元素从渲染树中完全移除，元素既不可见，也不是布局的组成部分

普通图层和复合图层

上面的介绍中，提到了 composite 概念。

可以简单的这样理解，浏览器渲染的图层一般包含两大类：渲染图层（普通图层）以及复合图层

  • 渲染图层：又称默认复合层，是页面普通的文档流。我们虽然可以通过绝对定位，相对定位，浮动定位脱离文档流，但它仍然属于默认复合层，共用同一个绘图上下文对象（GraphicsContext）。
  • 复合图层，它会单独分配资源（当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流重绘）

某些特殊的渲染层会被提升为复合成层（Compositing Layers），复合图层拥有单独的 GraphicsLayer，而其他不是复合图层的渲染层，则和其第一个拥有 GraphicsLayer 父层共用一个。

每个 GraphicsLayer 都有一个 GraphicsContext，GraphicsContext 会负责输出该层的位图，位图是存储在共享内存中，作为纹理上传到 GPU 中，最后由 GPU 将多个位图进行合成，然后 draw 到屏幕上，此时，我们的页面也就展现到了屏幕上。

可以 Chrome 源码调试 -> More Tools -> Rendering -> Layer borders 中看到，黄色的就是复合图层信息。

参考链接