瀏覽器在加載一個(gè)頁面的時(shí)候鳄乏，會(huì)經(jīng)過一個(gè)管道機(jī)制：
JavaScript -> Style（樣式樹） -> Layout（布局樹） -> Paint（像素繪制） -> Composite(合成)
CSS屬性如何影響上面管道
理論上，頁面加載到最后展現(xiàn)給用戶看棘利，這個(gè)過程都會(huì)經(jīng)過上述管道的處理橱野，其中，layout布局的過程是相當(dāng)耗費(fèi)性能的善玫，也就是我們常說的reflow水援；而paint的過程相對(duì)前者來說性能耗費(fèi)較低，這個(gè)就是我們常常在修改css顏色等屬性時(shí)導(dǎo)致頁面的repaint。
那么裹唆，是不是每個(gè)css屬性都會(huì)經(jīng)過上述管道的所有環(huán)節(jié)呢誓斥？
不是的。
我們?cè)陂_發(fā)頁面編寫css樣式的時(shí)候许帐，應(yīng)該對(duì)每個(gè)css屬性的trigger機(jī)制有一定的了解，這樣才能在性能上做到優(yōu)化毕谴，下面貼一下css屬性的trigger機(jī)制：
https://csstriggers.com/
注：有兩個(gè)屬性成畦，能過避開layout和paint的過程，就是transforms 和 opacity涝开。
希望對(duì)大家編寫優(yōu)秀的css樣式有幫助循帐。
