CSS属性导致的性能问题

浏览器在加载一个页面的时候，会经过一个管道机制：
JavaScript -> Style（样式树） -> Layout（布局树） -> Paint（像素绘制） -> Composite(合成)

CSS属性如何影响上面管道

理论上，页面加载到最后展现给用户看，这个过程都会经过上述管道的处理，其中，layout布局的过程是相当耗费性能的，也就是我们常说的reflow；而paint的过程相对前者来说性能耗费较低，这个就是我们常常在修改css颜色等属性时导致页面的repaint。
那么，是不是每个css属性都会经过上述管道的所有环节呢？
不是的。
我们在开发页面编写css样式的时候，应该对每个css属性的trigger机制有一定的了解，这样才能在性能上做到优化，下面贴一下css属性的trigger机制：
https://csstriggers.com/
注：有两个属性，能过避开layout和paint的过程，就是transforms 和 opacity。
希望对大家编写优秀的css样式有帮助。