目录
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 动画优化