對理論沒興趣的，可以只看紅色標注的結論

mozilla的工程師dbaron發表過一篇演講，提到reflow的問題。概念不難理解

mozilla系列瀏覽器構建網頁的過程:

1. 1、讀取html文檔，構建網頁文檔樹——就是從body開始到結束，把每個table或者div記錄下來
2. 2、reflow——通過css或者其他因素計算文檔樹中每個對象的大小、布局等
3. 3、把計算結果顯示在屏幕上

簡單言之瀏覽器的運算開銷大多在reflow這一步，就是獲取對象的布局、排版等樣式，如果樣式的定義有誤則瀏覽器會重新運算，之后再展現在瀏覽器上。
另外通過js來覆寫對象的樣式是比較典型的一種銷毀原樣式并重建的過程，這種銷毀和重建，都會增加瀏覽器的開銷。其中css方面，常用的js切換display:none和display:block是個最好的例子

而html文檔中，比較典型的是圖片的寬高未定義，瀏覽器會自行計算，所以很多網頁優化的文章都列入了這條，即可能的話，就把圖片的寬度高度寫進html文檔里。

從渲染過程上來講，mozilla有過css的書寫建議：

1.顯示樣式

display/position/float/clear

2.自身樣式

width/height/margin/padding/border/background

3.內容樣式

line-height/text-align/font系列（font-size/font-weight）/color/text-decoration/vitical-align

猜測這應該和mozilla系列瀏覽器本身渲染網頁的優先級順序切合。

我的書寫順序：

select{clear:both;display:block;float:left;margin:100px;padding:100px;width:100px;height:100px;line-height:100px;text-align:center;color:#000;font-size:12px;font-weight:400;background:#fff;border:1px solid #f00;)

大致符合建議規則，同時因為書寫樣式時修改頻率最高的就是背景和邊框，所以放在最外面，取了規則和工作效率的平衡點。