影響瀏覽器重繪和重排

1.簡述重排的概念

瀏覽器下載完頁面中的所有元件（HTML、JavaScript、CSS、圖片）之後會解析生成兩個內部資料結構（DOM樹和渲染樹），DOM樹表示頁面結構，渲染樹表示DOM節點如何顯示。重排是DOM元素的幾何屬性變化，

DOM樹的結構變化

，渲染樹需要重新計算。

2.簡述重繪的概念

重繪是一個元素外觀的改變所觸發的瀏覽器行為，例如改變visibility、outline、背景色等屬性。

瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀

。由於瀏覽器的流佈局，對渲染樹的計算通常只需要遍歷一次就可以完成。但table及其內部元素除外，它可能需要多次計算才能確定好其在渲染樹中節點的屬性值，比同等元素要多花兩倍時間，這就是我們儘量避免使用table佈局頁面的原因之一。

3.簡述重繪和重排的關係

重繪不會引起重排，但重排一定會引起重繪，一個元素的重排通常會帶來一系列的反應，甚至觸發整個文件的重排和重繪，效能代價是高昂的。

4.什麼情況下會觸發重排？

（1）頁面渲染初始化時；（這個無法避免）

（2）瀏覽器視窗改變尺寸；

（3）元素尺寸改變時；

（4）元素位置改變時；

（5）元素內容改變時；

（6）新增或刪除可見的DOM 元素時。

5.重排最佳化有如下五種方法

（1）將多次改變樣式屬性的操作合併成一次操作，減少DOM訪問。

（2）如果要批次新增DOM，可以先讓元素脫離文件流，操作完後再帶入文件流，這樣只會觸發一次重排。（fragment元素的應用）

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

（4）由於display屬性為none的元素不在渲染樹中，對隱藏的元素操作不會引發其他元素的重排。如果要對一個元素進行復雜的操作時，可以先隱藏它，操作完成後再顯示。這樣只在隱藏和顯示時觸發兩次重排。

（5）在記憶體中多次操作節點，完成後再新增到文件中去。例如要非同步獲取表格資料，渲染到頁面。可以先取得資料後在記憶體中構建整個表格的html片段，再一次性新增到文件中去，而不是迴圈新增每一行。

6.CSS載入

CSS（外鏈或內聯）會阻塞

整個

DOM的渲染（Rendering），然而DOM解析（Parsing）會正常進行

很多瀏覽器中，CSS會延遲指令碼執行和

DOMContentLoaded

事件

JS（外鏈或內聯）會阻塞

後續

DOM的解析（Parsing），後續DOM的渲染（Rendering）也將被阻塞

JS前的DOM可以正常解析（Parsing）和渲染（Rendering）

CSS阻塞DOM渲染

無論是外鏈CSS還是內聯CSS都會阻塞DOM渲染（Rendering），然而DOM解析（Parsing）會正常進行。 這意味著在CSS下載並解析結束之前，它後面的HTML都不會顯示。 這也是為什麼我們把樣式放在HTML內容之前，以防止被呈現內容發生樣式跳動。 當然代價就是顯示延遲，所以效能攸關的站點都會內聯所有CSS。

原文：影響瀏覽器重繪和重排 - Yuri_trender - 部落格園