浏览器渲染原理：浏览器在渲染页面之前会构建DOM树和CSSDOM树。HTML转换为文档对象模型DOM，CSS转换为CSS对象模型CSSDOM。它们是两个独立的数据结构。DOM和CSDOM组合在一起形成渲染树。遍历DOM树节点，将每个DOM节点与适当的CSSDOM规则进行匹配，以计算最终的布局、样式，最后将它们合并在一起并呈现在页面上。样式更新浏览器渲染页面后，后面如何动态更新样式：通过javascript动态更新，根据选择器匹配对应的DOM，计算该样式是布局还是样式，如下图：如果布局发生变化，则依次触发。如果布局没变，但是颜色变了，布局就不会触发怎么既不改变布局也不改变样式，layout和paint都不会触发，只会触发最后的合成部分，比如动画animationCSS使用animation，有两个属性可以实现，一个是transition和animation的区别，从名字也可以看出：transition的意思是transition，它只有起始帧和结束帧，中间过程是由浏览器根据你指定的属性自动补全，你无法自己控制动画。意思是，它包含多个关键帧。通过控制帧，可以制作复杂的动画。参考文章：Render-treeConstruction,Layout,andPaintSticktoCompositor-OnlyPropertiesandManageLayerCount
