最近看了好多關於reflow的問題,原來沒有註意到這個現象,最近開始慢慢的研究下,畢竟從前對於很多效能方面的細節沒有註意到。關於reflow應該簡單的說就是dom的渲染吧(透過CSS或其他因素計算文檔樹中每個物件的大小、佈局等),也許解釋的片面點,但先定義一個簡單的概念,方便理解。
首先是看到了mozilla中建議的css屬性書寫順序,文章是從資料看到的,這個書寫順序不但是因為專案的開發程式碼規範標準,也因為合理的書寫順序更符合了瀏覽器的渲染的順序。
mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//顯示屬性
* display
* list-style
* position
* float
* clear
//自身屬性
* width
* height
* margin
* padding
* border
* background
//文字屬性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
這篇《形象化的reflow》很真的是形象的指出了瀏覽器的渲染過程,從中你可以看到瀏覽器在加載的過程中並不是一步到位的把所有的dom一次的放置正確,而是在不斷的計算後頻繁的改變渲染結果,這其中包括了js、css等對dom表現的影響。