浏览器渲染及动画

浏览器渲染原理：

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