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