瀏覽器的重繪repaints與重排reflows深入分析

2024-07-11 08:29:27

字體：大中小

來源：轉載

供稿：網友

在項目的交互或視覺評審中，前端同學常常會對一些交互效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪和重排，需要付出高昂的性能代價。那么，什么是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程中將重繪和重排引發的性能問題考慮進去？本文期待可以部分解釋以上三個問題。
　　瀏覽器從下載文檔到顯示頁面的過程是個復雜的過程，這里包含了重繪和重排。各家瀏覽器引擎的工作原理略有差別，但也有一定規則。簡單講，通常在文檔初次加載時，瀏覽器引擎會解析HTML文檔來構建DOM樹，之后根據DOM元素的幾何屬性構建一棵用于渲染的樹。渲染樹的每個節點都有大小和邊距等屬性，類似于盒子模型（由于隱藏元素不需要顯示，渲染樹中并不包含DOM樹中隱藏的元素）。當渲染樹構建完成后，瀏覽器就可以將元素放置到正確的位置了，再根據渲染樹節點的樣式屬性繪制出頁面。由于瀏覽器的流布局，對渲染樹的計算通常只需要遍歷一次就可以完成。但table及其內部元素除外，它可能需要多次計算才能確定好其在渲染樹中節點的屬性，通常要花3倍于同等元素的時間。這也是為什么我們要避免使用table做布局的一個原因。
　　重繪是一個元素外觀的改變所觸發的瀏覽器行為，例如改變vidibility、outline、背景色等屬性。瀏覽器會根據元素的新屬性重新繪制，使元素呈現新的外觀。重繪不會帶來重新布局，并不一定伴隨重排。
　　重排是更明顯的一種改變，可以理解為渲染樹需要重新計算。下面是常見的觸發重排的操作：
1. DOM元素的幾何屬性變化
　　當DOM元素的幾何屬性變化時，渲染樹中的相關節點就會失效，瀏覽器會根據DOM元素的變化重建構建渲染樹中失效的節點。之后，會根據新的渲染樹重新繪制這部分頁面。而且，當前元素的重排也許會帶來相關元素的重排。例如，容器節點的渲染樹改變時，會觸發子節點的重新計算，也會觸發其后續兄弟節點的重排，祖先節點需要重新計算子節點的尺寸也會產生重排。最后，每個元素都將發生重繪。可見，重排一定會引起瀏覽器的重繪，一個元素的重排通常會帶來一系列的反應，甚至觸發整個文檔的重排和重繪，性能代價是高昂的。
2.DOM樹的結構變化
　　當DOM樹的結構變化時，例如節點的增減、移動等，也會觸發重排。瀏覽器引擎布局的過程，類似于樹的前序遍歷，是一個從上到下從左到右的過程。通常在這個過程中，當前元素不會再影響其前面已經遍歷過的元素。所以，如果在body最前面插入一個元素，會導致整個文檔的重新渲染，而在其后插入一個元素，則不會影響到前面的元素。

上一篇：firebug使用方法在IE上使用firebug的技巧圖文介紹

下一篇：css 半透明讓IE6支持png圖片半透明解決方法