浏览器渲染及动画

浏览器渲染原理：

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