DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> 浏覽器的重繪與重排
浏覽器的重繪與重排
編輯:WEB前端代碼     
在項目的交互或視覺評審中,前端同學常常會對一些交互效果質疑,提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的浏覽器重繪(redraw)和重排(reflow),需要付出高昂的性能代價。那麼,什麼是浏覽器的重繪和重排呢?二者何時發生以及如何權衡?如何在具體的開發過程中將重繪和重排引發的性能問題考慮進去?本文期待可以部分解釋以上三個問題。

  浏覽器從下載文檔到顯示頁面的過程是個復雜的過程,這裡包含了重繪和重排。各家浏覽器引擎的工作原理略有差別,但也有一定規則。簡單講,通常在文檔初次加載時,浏覽器引擎會解析HTML文檔來構建DOM樹,之後根據DOM元素的幾何屬性構建一棵用於渲染的樹。渲染樹的每個節點都有大小和邊距等屬性,類似於盒子模型(由於隱藏元素不需要顯示,渲染樹中並不包含DOM樹中隱藏的元素)。當渲染樹構建完成後,浏覽器就可以將元素放置到正確的位置了,再根據渲染樹節點的樣式屬性繪制出頁面。由於浏覽器的流布局,對渲染樹的計算通常只需要遍歷一次就可以完成。但table及其內部元素除外,它可能需要多次計算才能確定好其在渲染樹中節點的屬性,通常要花3倍於同等元素的時間。這也是為什麼我們要避免使用table做布局的一個原因。

  重繪是一個元素外觀的改變所觸發的浏覽器行為,例如改變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 {
background: #eee;
color: #093;
height: 200px;
}
 JS:
document.getElementById(‘changeDiv’).className = ‘changeDiv’;


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


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


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


  5. 在需要經常獲取那些引起浏覽器重排的屬性值時,要緩存到變量。

  在最近幾次面試中比較常問的一個問題:在前端如何實現一個表格的排序。如果應聘者的方案中考慮到了如何減少重繪和重排的影響,將是使人滿意的方案。
 參考文檔:
 Loading Web pages
 http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#browsers
  Rendering
 http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#rendering
 WebCore RenderingI – The Basics
 http://www.webkit.org/blog/114/webcore-rendering-i-the-basics/
 Notes on HTML Reflow
 http://www-archive.mozilla.org/newlayout/doc/reflow.html
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved