如果你沒有意識到css書寫順序?qū)π阅艿挠绊懚死瘢憧赡茈S便寫，想到哪個(gè)加哪個(gè)伞矩，沒有順序性可言瓢阴，當(dāng)有一天，你開始考慮性能優(yōu)化的時(shí)候垒拢，你會(huì)發(fā)現(xiàn)旬迹，正確的書寫css順序，能幫我們性能提升不少, 如果你已經(jīng)使用ts求类，并且css做了配置奔垦，你會(huì)發(fā)現(xiàn)如果css隨便寫，會(huì)給你waning提示尸疆，下面就來說一下css書寫的順序椿猎，以及為什么要這樣寫惶岭？

1、書寫順序
（1）定位屬性相關(guān)：position display float left top right bottom overflow clear z-index
（2）自身屬性相關(guān)：width height padding border margin background
（3）文字樣式相關(guān)：font-family font-size font-style font-weight font-varient color
（4）文本屬性相關(guān)：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
（5）css3中新增屬性：content box-shadow border-radius transform 等等
這樣做的好處是：減少瀏覽器reflow（回流）犯眠，提升瀏覽器渲染dom的性能

2按灶、瀏覽器的渲染原理
①解析html構(gòu)建dom樹，解析css構(gòu)建css樹：將html解析成樹形的數(shù)據(jù)結(jié)構(gòu)筐咧，將css解析成樹形的數(shù)據(jù)結(jié)構(gòu)
②構(gòu)建render樹：DOM樹和CSS樹合并之后形成的render樹鸯旁。
③布局render樹：有了render樹，瀏覽器已經(jīng)知道那些網(wǎng)頁中有哪些節(jié)點(diǎn)量蕊，各個(gè)節(jié)點(diǎn)的css定義和以及它們的從屬關(guān)系铺罢，從而計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置。
④繪制render樹：按照計(jì)算出來的規(guī)則残炮，通過顯卡把內(nèi)容畫在屏幕上韭赘。

css樣式解析到顯示至瀏覽器屏幕上就發(fā)生在②③④步驟，可見瀏覽器并不是一獲取到css樣式就立馬開始解析而是根據(jù)css樣式的書寫順序?qū)⒅凑誨om樹的結(jié)構(gòu)分布render樣式势就，完成第②步泉瞻，然后開始遍歷每個(gè)樹結(jié)點(diǎn)的css樣式進(jìn)行解析，此時(shí)的css樣式的遍歷順序完全是按照之前的書寫順序蛋勺。在解析過程中瓦灶，一旦瀏覽器發(fā)現(xiàn)某個(gè)元素的定位變化影響布局，則需要倒回去重新渲染抱完，正如按照這樣的書寫書序：
width: 100px;
height: 100px;
background-color: red ;
position: absolute;
當(dāng)瀏覽器解析到position的時(shí)候突然發(fā)現(xiàn)該元素是絕對定位元素需要脫離文檔流贼陶，而之前卻是按照普通元素進(jìn)行解析的，所以不得不重新渲染巧娱，解除該元素在文檔中所占位置碉怔，然而由于該元素的占位發(fā)生變化，其他元素也可能會(huì)受到它回流的影響而重新排位禁添。最終導(dǎo)致③步驟花費(fèi)的時(shí)間太久而影響到④步驟的顯示撮胧，影響了用戶體驗(yàn)。

repaint（重繪）：改變某個(gè)元素的背景色老翘、文字顏色芹啥、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時(shí)，屏幕的一部分要重畫铺峭，但是元素的幾何尺寸沒有變墓怀。
1）render樹的結(jié)構(gòu)不等同于DOM樹的結(jié)構(gòu)，一些設(shè)置display:none的節(jié)點(diǎn)不會(huì)被放在render樹中卫键，但會(huì)在dom樹中傀履。
2）有些情況，比如修改了元素的樣式莉炉，瀏覽器并不會(huì)立刻reflow或repaint钓账，而是把這些操作積攢一批碴犬，然后做一次reflow，這也叫做異步reflow.但在有些情況下梆暮，比如改變窗口服协，改變頁面默認(rèn)的字體等，對于這些情況啦粹，瀏覽器會(huì)馬上進(jìn)行reflow.
3）為了更好的用戶體驗(yàn)蚯涮，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局render樹卖陵。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)张峰，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容泪蔫。

所以規(guī)范的的css書寫順序可以提升我們的性能，也是性能優(yōu)化的一部分喘批！
——————————————————————————————————————
方便自己查閱
原文鏈接：https://blog.csdn.net/qq_36060786/article/details/79311244