浏览器渲染及动画

浏览器渲染原理：

1. 浏览器在渲染页面之前会先构建 DOM 树和 CSSDOM 树。
2. HTML会转换成文档对象模型 DOM，CSS 会转换成 CSS 对象模型CSSDOM。它们两个是互相独立的数据结构。

3. DOM和 CSSDOM 组合在一起形成渲染树。

   1. 遍历 DOM 树节点
   2. 对每个 DOM 节点用合适的 CSSDOM 规则去匹配
   3. 计算出最终布局，样式
4. 最后将它们合并到一起，渲染在页面中

样式更新

浏览器将页面渲染好之后，后面是如何动态更新样式的：

• 通过 javascript 动态更新

• 根据选择器匹配对应的 DOM，计算出style 是布局还是样式，如下图所示：

  1. 如果是更改布局，是会依次触发
  2. 如果布局没有改动，只是更改了颜色之类的，layout将不会触发
  3. 如何既不改布局，也不改样式啥的，layout和 paint 都不会触发，只会触发最后的 composite 部分，比如动画

动画

CSS中使用动画，有两种属性可以实现，一种是 transition 和animation，它俩的区别从名字中也可以看出来：

• transition是过渡的意思，它只有开始帧和结束帧，中间的过程浏览器用你指定的属性自动完成，你无法自己控制
• animation是动画的意思，它包含多个关键帧，通过控制帧，可以做出复杂的动画

参考文章：
Render-tree Construction, Layout, and Paint
Stick to Compositor-Only Properties and Manage Layer Count