記得剛開始學(xué)習(xí)前端的時候睦优，每次寫css樣式都是用到什么就在樣式表后添加什么渗常，完全沒有考慮到樣式屬性的書寫順序?qū)W(wǎng)頁加載代碼的影響。后來逐漸才知道正確的樣式順序不僅易于查看汗盘，并且也屬于css樣式優(yōu)化的一種方式皱碘。那么是怎么個順序呢？
（1）定位屬性：position display float left top right bottom overflow clear z-index
（2）自身屬性：width height padding border margin background
（3）文字樣式：font-family font-size font-style font-weight font-varient color
（4）文本屬性：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……
按照上述1 2 3 4 5的順序進(jìn)行書寫隐孽。
目的：減少瀏覽器reflow（回流）癌椿，提升瀏覽器渲染dom的性能
原理：瀏覽器的渲染流程為——
①解析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)送粱，各個節(jié)點(diǎn)的css定義和以及它們的從屬關(guān)系褪贵，從而計算出每個節(jié)點(diǎn)在屏幕中的位置。
④繪制render樹：按照計算出來的規(guī)則，通過顯卡把內(nèi)容畫在屏幕上脆丁。
css樣式解析到顯示至瀏覽器屏幕上就發(fā)生在②③④步驟世舰，可見瀏覽器并不是一獲取到css樣式就立馬開始解析而是根據(jù)css樣式的書寫順序?qū)⒅凑誨om樹的結(jié)構(gòu)分布render樣式，完成第②步槽卫，然后開始遍歷每個樹結(jié)點(diǎn)的css樣式進(jìn)行解析跟压，此時的css樣式的遍歷順序完全是按照之前的書寫順序。在解析過程中歼培，一旦瀏覽器發(fā)現(xiàn)某個元素的定位變化影響布局震蒋，則需要倒回去重新渲染正如按照這樣的書寫書序：
width: 100px;
height: 100px;
background-color: red ;
position: absolute;
當(dāng)瀏覽器解析到position的時候突然發(fā)現(xiàn)該元素是絕對定位元素需要脫離文檔流，而之前卻是按照普通元素進(jìn)行解析的躲庄，所以不得不重新渲染查剖，解除該元素在文檔中所占位置，然而由于該元素的占位發(fā)生變化噪窘，其他元素也可能會受到它回流的影響而重新排位笋庄。最終導(dǎo)致③步驟花費(fèi)的時間太久而影響到④步驟的顯示，影響了用戶體驗倔监。
所以規(guī)范的的css書寫順序?qū)τ谖臋n渲染來說一定是事半功倍的直砂！
擴(kuò)展：還有一個會影響瀏覽器渲染性能的詞匯“repaint（重繪）”
repaint（重繪）：改變某個元素的背景色、文字顏色浩习、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時静暂，屏幕的一部分要重畫，但是元素的幾何尺寸沒有變谱秽。
注意：
a.render樹的結(jié)構(gòu)不等同于DOM樹的結(jié)構(gòu)洽蛀，一些設(shè)置display:none的節(jié)點(diǎn)不會被放在render樹中，但會在dom樹中弯院。
b.有些情況辱士，比如修改了元素的樣式，瀏覽器并不會理科reflow或repaint听绳，而是把這些操作積攢一批颂碘，然后做一次reflow，這也叫做異步reflow.但在有些情況下椅挣，比如改變窗口头岔，改變頁面默認(rèn)的字體等，對于這些情況鼠证，瀏覽器會馬上進(jìn)行reflow.
c.為了更好的用戶體驗峡竣，渲染引擎將會盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會等到所有的html都解析完成之后再去構(gòu)建和布局render樹量九。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容适掰，同時颂碧，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容。
