記得剛開始學習前端的時候，每次寫css樣式都是用到什麼就在樣式表後新增什麼，完全沒有考慮到樣式屬性的書寫順序對網頁載入程式碼的影響。後來逐漸才知道正確的樣式順序不僅易於檢視，並且也屬於css樣式優化的一種方式。那麼是怎麼個順序呢？

（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的順序進行書寫。

目的：減少瀏覽器reflow（迴流），提升瀏覽器渲染dom的效能

原理：瀏覽器的渲染流程為——

①解析html構建dom樹，解析css構建css樹：將html解析成樹形的資料結構，將css解析成樹形的資料結構

②構建render樹：DOM樹和CSS樹合併之後形成的render樹。

③佈局render樹：有了render樹，瀏覽器已經知道那些網頁中有哪些節點，各個節點的css定義和以及它們的從屬關係，從而計算出每個節點在螢幕中的位置。

④繪製render樹：按照計算出來的規則，通過顯示卡把內容畫在螢幕上。

css樣式解析到顯示至瀏覽器螢幕上就發生在②③④步驟，可見瀏覽器並不是一獲取到css樣式就立馬開始解析而是根據css樣式的書寫順序將之按照dom樹的結構分佈render樣式，完成第②步，然後開始遍歷每個樹結點的css樣式進行解析，此時的css樣式的遍歷順序完全是按照之前的書寫順序。在解析過程中，一旦瀏覽器發現某個元素的定位變化影響佈局，則需要倒回去重新渲染正如按照這樣的書寫書序：

width: 100px;

height: 100px;

background-color: red ;

position: absolute;

當瀏覽器解析到position的時候突然發現該元素是絕對定位元素需要脫離文件流，而之前卻是按照普通元素進行解析的，所以不得不重新渲染，解除該元素在文件中所佔位置，然而由於該元素的佔位發生變化，其他元素也可能會受到它迴流的影響而重新排位。最終導致③步驟花費的時間太久而影響到④步驟的顯示，影響了使用者體驗。

所以規範的的css書寫順序對於文件渲染來說一定是事半功倍的！

擴充套件：還有一個會影響瀏覽器渲染效能的詞彙“repaint（重繪）”

repaint（重繪）：改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性時，螢幕的一部分要重畫，但是元素的幾何尺寸沒有變。

注意：

a.render樹的結構不等同於DOM樹的結構，一些設定display:none的節點不會被放在render樹中，但會在dom樹中。

b.有些情況，比如修改了元素的樣式，瀏覽器並不會理科reflow或repaint，而是把這些操作積攢一批，然後做一次reflow，這也叫做非同步reflow.但在有些情況下，比如改變視窗，改變頁面預設的字型等，對於這些情況，瀏覽器會馬上進行reflow.

c.為了更好的使用者體驗，渲染引擎將會盡可能早的將內容呈現到螢幕上，並不會等到所有的html都解析完成之後再去構建和佈局render樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網路下載其餘內容。

此文部分是參考csdn

文章內容進行編寫的。