一個頁面由兩部分組成：
　　DOM：描述該頁面的結(jié)構(gòu)
　　render：描述DOM節(jié)點(nodes)在頁面上如何呈現(xiàn)
　　當(dāng)DOM元素的屬性發(fā)生變化(如color)時,瀏覽器會通知render重新描繪相應(yīng)的元素,此過程稱為repaint。如果該次變化涉及元素布局(如width),瀏覽器則拋棄原有屬性,重新計算并把結(jié)果傳遞給render以重新描繪頁面元素,此過程稱為reflow。這兩個過程是很耗費瀏覽器性能的,從IE系列和Chrome渲染頁面速度上的差距即可看出渲染引擎計算對應(yīng)值和呈現(xiàn)并不一定高效,而每次對元素的操作都會發(fā)生repaints或reflow,因此編寫DOM交互時如果不注意就會導(dǎo)致頁面性能低下.
　　頁面渲染的過程如下：
　　1.解析HTML代碼并生成一個DOM樹。
　　2.解析CSS文件，順序為：瀏覽器默認樣式->自定義樣式->頁面內(nèi)的樣式。
　　3.生成一個渲染樹（rendertree）。這個渲染樹和DOM樹的不同之處在于，它是受樣式影響的。它不包括那些不可見的節(jié)點。
　　4.當(dāng)渲染樹生成之后，瀏覽器就會在屏幕上“畫”出所有渲染樹中的節(jié)點。
　　2.什么情況下會觸發(fā)瀏覽器的repaint/reflow?
　　除了頁面在首次加載時必然要經(jīng)歷該過程之外，還有以下行為會觸發(fā)這個行為：
　　1.DOM元素的添加、修改（內(nèi)容）、刪除(Reflow+Repaint)
　　2.僅修改DOM元素的字體顏色（只有Repaint，因為不需要調(diào)整布局）
　　3.應(yīng)用新的樣式或者修改任何影響元素外觀的屬性
　　4.Resize瀏覽器窗口、滾動頁面
　　5.讀取元素的某些屬性