瀏覽器加載頁面原理

通常在文檔初次加載時，瀏覽器引擎會解析HTML文檔來構建DOM樹，之后根據DOM元素的幾何屬性構建一棵用于渲染的樹。渲染樹的每個節點都有大小和邊距等屬性，類似于 盒子模型 （由于隱藏元素不需要顯示，渲染樹中并不包含DOM樹中隱藏的元素）。當渲染樹構建完成后，瀏覽器就可以將元素放置到正確的位置了，再根據渲染樹節點的樣式屬性繪制出頁面。由于瀏覽器的 流布局，對渲染樹的計算通常只需要遍歷一次就可以完成。但table及其內部元素除外，它可能需要多次計算才能確定好其在渲染樹中節點的屬性，通常要花3倍于同等元素的時間。這也是為什么我們要避免使用table做布局的一個原因。

重繪

重繪是一個元素 外觀的改變 所觸發的瀏覽器行為，例如改變vidibility、outline、背景色等屬性。瀏覽器會根據元素的新屬性重新繪制，使元素呈現新的外觀。重繪不會帶來重新布局，并不一定伴隨重排。瀏覽器在進行重繪和重排的時候是要付出高昂的性能代價的。

重排

重排是更明顯的一種改變，可以理解為渲染樹需要重新計算。下面是常見的觸發重排的操作：

DOM元素的幾何屬性變化。 DOM樹的結構變化。

例如節點的增減、移動等.

獲取某些屬性。

當獲取一些屬性時，瀏覽器為取得正確的值也會觸發重排。這樣就使得瀏覽器的優化失效了。這些屬性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用這些值時應進行緩存。

此外，改變元素的一些樣式，調整瀏覽器窗口大小，滾動條出現等等也都將觸發重排。

減少重排次數和重排影響范圍

1、將多次改變樣式屬性的操作合并成一次操作。例如，

2、 將需要多次重排的元素，position屬性設為absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會影響到其他元素。例如有動畫效果的元素就最好設置為絕對定位。

3、 在內存中多次操作節點，完成后再添加到文檔中去。例如要異步獲取表格數據，渲染到頁面。可以先取得數據后在內存中構建整個表格的html片段，再一次性添加到文檔中去，而不是循環添加每一行。