瀏覽器的重繪與重排

在項目的交互或視覺評審中,前端同窗經常會對一些交互效果質疑,提出這樣作很差那樣作很差。主要緣由是這些效果一般會產生一系列的瀏覽器重繪 (redraw)和重排(reflow),須要付出高昂的性能代價。那麼,什麼是瀏覽器的重繪和重排呢?兩者什麼時候發生以及如何權衡?如何在具體的開發過程 中將重繪和重排引起的性能問題考慮進去?本文期待能夠部分解釋以上三個問題。html

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

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

  重排是更明顯的一種改變,能夠理解爲渲染樹須要從新計算。下面是常見的觸發重排的操做:面試

  1. DOM元素的幾何屬性變化瀏覽器

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

  2. DOM樹的結構變化app

  當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

相關文章
相關標籤/搜索