瀏覽器的重繪與重排

2021-07-09 03:14:12 字數 2149 閱讀 5905

在專案的互動或視覺評審中,前端同學常常會對一些互動效果質疑,提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪(redraw)和重排(reflow),需要付出高昂的效能代價。那麼,什麼是瀏覽器的重繪和重排呢?二者何時發生以及如何權衡?如何在具體的開發過程中將重繪和重排引發的效能問題考慮進去?本文期待可以部分解釋以上三個問題。

重繪是乙個元素外觀的改變所觸發的瀏覽器行為,例如改變visibility、outline、背景色等屬性。瀏覽器會根據元素的新屬性重新繪製,使元素呈現新的外觀。重繪不會帶來重新布局,並不一定伴隨重排。

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

1. dom元素的幾何屬性變化

當dom元素的幾何屬性變化時,渲染樹中的相關節點就會失效,瀏覽器會根據dom元素的變化重新構建渲染樹中失效的節點。之後,會根據新的渲染樹重新繪製這部分頁面。而且,當前元素的重排也許會帶來相關元素的重排。例如,容器節點的渲染樹改變時,會觸發子節點的重新計算,也會觸發其後續兄弟節點的重排,祖先節點需要重新計算子節點的尺寸也會產生重排。最後,每個元素都將發生重繪。可見,重排一定會引起瀏覽器的重繪,乙個元素的重排通常會帶來一系列的反應,甚至觸發整個文件的重排和重繪,效能代價是高昂的。

2. dom樹的結構變化

當dom樹的結構變化時,例如節點的增減、移動等,也會觸發重排。瀏覽器引擎布局的過程,類似於樹的前序遍歷,是乙個從上到下從左到右的過程。通常在這個過程中,當前元素不會再影響其前面已經遍歷過的元素。所以,如果在body最前面插入乙個元素,會導致整個文件的重新渲染,而在其後插入乙個元素,則不會影響到前面的元素。

3. 獲取某些屬性

瀏覽器引擎可能會針對重排做了優化。比如opera,它會等到有足夠數量的變化發生,或者等到一定的時間,或者等乙個執行緒結束,再一起處理,這樣就只發生一次重排。但除了渲染樹的直接變化,當獲取一些屬性時,瀏覽器為取得正確的值也會觸發重排。這樣就使得瀏覽器的優化失效了。這些屬性包括:offsettop、offsetleft、 offsetwidth、offsetheight、scrolltop、scrollleft、scrollwidth、scrollheight、clienttop、clientleft、clientwidth、clientheight、getcomputedstyle() (currentstyle in ie)。所以,在多次使用這些值時應進行快取。

此外,改變元素的一些樣式,調整瀏覽器視窗大小等等也都將觸發重排。

開發中,比較好的實踐是儘量減少重排次數和縮小重排的影響範圍。例如:

1. 將多次改變樣式屬性的操作合併成一次操作。例如,

js:

var changediv =document.getelementbyid(『changediv』);

changediv.style.color = 『#093′;

changediv.style.background =『#eee』;

changediv.style.height = 』200px』;

可以合併為:

css:

div.changediv

js:

document.getelementbyid(『changediv』).classname = 『changediv』;

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

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

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

5. 在需要經常獲取那些引起瀏覽器重排的屬性值時,要快取到變數。

在最近幾次面試中比較常問的乙個問題:在前端如何實現乙個**的排序。如果應聘者的方案中考慮到了如何減少重繪和重排的影響,將是使人滿意的方案。

參考文件:

loading web pages

rendering

webcore renderingi – the basics

notes on html reflow

瀏覽器的重繪與重排

在專案的互動或視覺評審中,前端同學常常會對一些互動效果質疑,提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼,什麼是瀏覽器的重繪和重排呢?二者何時發生以及如何權衡?如何在具體的開發過程 中將重繪和重排引發的效能...

瀏覽器的重繪與重排

在專案的互動或視覺評審中,前端同學常常會對一些互動效果質疑,提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼,什麼是瀏覽器的重繪和重排呢?二者何時發生以及如何權衡?如何在具體的開發過程中將重繪和重排引發的效能問...

瀏覽器的重繪與重排

在專案的互動或視覺評審中,前端同學常常會對一些互動效果質疑,提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼,什麼是瀏覽器的重繪和重排呢?二者何時發生以及如何權衡?如何在具體的開發過程 中將重繪和重排引發的效能...