I：浏览器的渲染过程

（1）浏览器根据HTML构建HTML树

（2）浏览器根据CSS构建CSS树

（3）将HTML树和CSS树  合并  成一颗渲染树

（4）根据合并后的结果，进行显示的  布局

（5）绘制   需要显示的样式

（6）根据层叠关系 合成  并展示画面

II：如何更新样式

首先，我们需要知道，在一般情况下，我们通常是使用JS来更新样式

在此基准上，我们有三种不同的更新方法分别为：

（1）JS / CSS > 样式  > 布局 > 绘制 > 合成  

该方法是全走一遍，重新进行渲染过程

（2）JS / CSS >  样式  > 绘制 > 合成 

该方法会跳过layout（布局）。比如改变背景颜色，就会直接repaint+composite

（3）JS / CSS > 样式  >  合成

该方法就是直接跳过layout和paint，只需要composite。那比如改变transform，就只需要composite了。

其他更多元素触发浏览器渲染流程的资料，可在CSS Triggers中查看  https://csstriggers.com/