浏览器渲染原理

目录

1、渲染前准备：

2、三个渲染步骤

3、浏览器渲染过程总结

4、css 动画优化

---

1、渲染前准备：

浏览器在渲染页面前，会首先解析 HTML 和 CSS 代码，根据代码构建相应的 HTML 树（DOM） 和 CSS 树（CSSOM），然后将两棵树合并称为一棵 渲染树（render tree）（这里主要做的是排除非视觉节点，比如 script，meta 标签和排除 display 为 none 的节点，之后进行渲染步骤）。过程如下图所示：

2、三个渲染步骤

浏览器渲染的步骤分为三个：布局（Layout）、绘制（Paint）、合成（Compose ），其中 布局步骤 是根据渲染树计算出 DOM 节点盒模型的位置和大小，然后 绘制步骤 是在布局的基础上，给边框、文字和阴影等绘制颜色，最后 合成步骤 是根据已经布局和绘制好的页面，依据层叠关系展示到前端页面上。

以上是浏览器 第一次加载页面 的全过程，如果通过 JavaScript 更新页面布局或样式时，会重复执行以上三个渲染步骤，但是不一定会全部执行，比如：

第一种：移除某个元素时，会导致页面上的其他元素 回流（relayout），页面重新布局：reLayout → rePaint → 合成。

第二种：只改变背景颜色时，页面上的元素布局并没有被打乱，只是进行页面样式 重绘（rePaint）：rePaint → 合成。

第三种：通过 transform 改变样式时，只需进行 composite 即可，所以 transform 性能较好推荐使用。参考：css triggers 。

3、浏览器渲染过程总结

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

4、css 动画优化

JS 优化：使用 requestAnimationFrame() 代替 setTimeout() 或 setInterval()。

CSS优化：使用 will-change 或 translate 属性，会跳过回流和重回步骤，提高动画性能。

推荐文章：css 动画优化