css樣式的書寫順序及原理——很重要！

記得剛開始學習前端的時候，每次寫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樹。它是解析完一部份內容就顯示一部份內容，同時，可能還在經過網絡下載其他內容。

相信不少人在剛接觸前端或者中期時候總會遇到一些問題及瓶頸期，如學了一段時間沒有方向感或者堅持不下去一我的學習枯燥乏味有問題也不知道怎麼解決，對此我整理了一些資料 喜歡個人文章想與更多資深大牛一塊兒討論和學習的話 歡迎加入個人學習交流羣907694362