浏览器渲染原理是什么

CSSOM 树和 DOM 树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。

CSSOM树 和 DOM树 是什么

如下图

CSS渲染原理 - 图1

CSS渲染原理 - 图2

浏览器解析并构建 HTML 和 CSS 时，就会生成对应的DOM树和CSSOM树，然后结合：
CSS渲染原理 - 图3

渲染过程：

  • 根据HTML构建HTML树（DOM）。
  • 根据CSS构建CSS树（CSSOM）。
  • 将两颗树合并成一颗渲染树（render tree）。
  • Layout 布局（文档流、盒模型、计算大小和位置）。
  • Paint 绘制 （把边框颜色、文字颜色、阴影等画出来）。
  • Compose 合成（根据叠层关系展示画面）。

Layout 布局，Paint 布局，Compose 合成又是怎么样呢？

一般我们用 JS 来更新样式，如：

  • div.style.background = 'red'
  • div.style.display = 'none'
  • div.classList.add('red')
  • div.remove()直接删除节点。

这些在渲染方面有什么不同吗？

:::success 如果会JS可以试试看调试代码 F12 —> 打开开发者工具后直接按ESC键跳出一个调试框 —> 选择三个小点点，一般在左上角 —> 选择 Rendering(渲染) —> 接着勾选 Paint flashing(画面闪烁) —> 最后刷新页面。（此操作仅限chrome内核的浏览器） :::

刷新页面的时候，就可以发现整个页面会出现一两秒的原谅绿，说明整个页面都在绘制，或者有几个地方依然闪烁着原谅绿，说明这几个地方一直在绘制！可以尝试挑几个网站刷新试试，最好有动画的网站观感最好，便可以方便看原谅绿！

上面的JS更新方式难道有什么不一样吗？没错，而且分三种更新方式，如图：
gx.PNG

JS 代码对应图片的话应该是这样的：

  • 第一种，全走。
    div.remove()会触发当前消失，其他元素relayout。
  • 第二种，跳过Layout（布局）。
    改变背景颜色，直接 repaint + composite。
  • 第三种，跳过Layout（布局）和 Paint（绘制）。
    改变 transform，只需 composite 。

根据上面的图片然后就可知道，这三种渲染过程大体相同，只不过第二种和第三种就偷懒了。虽然直接跳过一些步骤，但依旧可以完成渲染。

:::success 相比较第一种，第二种和第三种性能好，第三种更加出色！ :::

【问】每个属性都有自己的触发上面三种渲染的其中一种，但我怎么知道哪些会触发什么样的呢？
【答】CSS Triggers，详细请自己探索

有了这些，就可以很方便的进行CSS动画优化，这里还有Google团队写的关于CSS动画优化的文章，都写在里面了。