浏览器渲染及动画

浏览器渲染原理：

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