瀏覽器的重繪[repaints]與重排[reflows]

在項(xiàng)目的交互或視覺評(píng)審中，前端同學(xué)常常會(huì)對(duì)一些交互效果質(zhì)疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會(huì)產(chǎn)生一系列的瀏覽器重繪和重排，需要付出高昂的性能代價(jià)。那么，什么是瀏覽器的重繪和重排呢？二者何時(shí)發(fā)生以及如何權(quán)衡？如何在具體的開發(fā)過(guò)程中將重繪和重排引發(fā)的性能問(wèn)題考慮進(jìn)去？本文期待可以部分解釋以上三個(gè)問(wèn)題。

瀏覽器從下載文檔到顯示頁(yè)面的過(guò)程是個(gè)復(fù)雜的過(guò)程，這里包含了重繪和重排。各家瀏覽器引擎的工作原理略有差別，但也有一定規(guī)則。簡(jiǎn)單講，通常在文檔初次加載時(shí)，瀏覽器引擎會(huì)解析HTML文檔來(lái)構(gòu)建DOM樹，之后根據(jù)DOM元素的幾何屬性構(gòu)建一棵用于渲染的樹。渲染樹的每個(gè)節(jié)點(diǎn)都有大小和邊距等屬性，類似于盒子模型（由于隱藏元素不需要顯示，渲染樹中并不包含DOM樹中隱藏的元素）。當(dāng)渲染樹構(gòu)建完成后，瀏覽器就可以將元素放置到正確的位置了，再根據(jù)渲染樹節(jié)點(diǎn)的樣式屬性繪制出頁(yè)面。由于瀏覽器的流布局，對(duì)渲染樹的計(jì)算通常只需要遍歷一次就可以完成。但table及其內(nèi)部元素除外，它可能需要多次計(jì)算才能確定好其在渲染樹中節(jié)點(diǎn)的屬性，通常要花3倍于同等元素的時(shí)間。這也是為什么我們要避免使用table做布局的一個(gè)原因。

重繪是一個(gè)元素外觀的改變所觸發(fā)的瀏覽器行為，例如改變vidibility、outline、背景色等屬性。瀏覽器會(huì)根據(jù)元素的新屬性重新繪制，使元素呈現(xiàn)新的外觀。重繪不會(huì)帶來(lái)重新布局，并不一定伴隨重排。

重排是更明顯的一種改變，可以理解為渲染樹需要重新計(jì)算。下面是常見的觸發(fā)重排的操作：

1. DOM元素的幾何屬性變化。
當(dāng)DOM元素的幾何屬性變化時(shí)，渲染樹中的相關(guān)節(jié)點(diǎn)就會(huì)失效，瀏覽器會(huì)根據(jù)DOM元素的變化重建構(gòu)建渲染樹中失效的節(jié)點(diǎn)。之后，會(huì)根據(jù)新的渲染樹重新繪制這部分頁(yè)面。而且，當(dāng)前元素的重排也許會(huì)帶來(lái)相關(guān)元素的重排。例如，容器節(jié)點(diǎn)的渲染樹改變時(shí)，會(huì)觸發(fā)子節(jié)點(diǎn)的重新計(jì)算，也會(huì)觸發(fā)其后續(xù)兄弟節(jié)點(diǎn)的重排，祖先節(jié)點(diǎn)需要重新計(jì)算子節(jié)點(diǎn)的尺寸也會(huì)產(chǎn)生重排。最后，每個(gè)元素都將發(fā)生重繪?？梢?，重排一定會(huì)引起瀏覽器的重繪，一個(gè)元素的重排通常會(huì)帶來(lái)一系列的反應(yīng)，甚至觸發(fā)整個(gè)文檔的重排和重繪，性能代價(jià)是高昂的。

2.DOM樹的結(jié)構(gòu)變化。
當(dāng)DOM樹的結(jié)構(gòu)變化時(shí)，例如節(jié)點(diǎn)的增減、移動(dòng)等，也會(huì)觸發(fā)重排。瀏覽器引擎布局的過(guò)程，類似于樹的前序遍歷，是一個(gè)從上到下從左到右的過(guò)程。通常在這個(gè)過(guò)程中，當(dāng)前元素不會(huì)再影響其前面已經(jīng)遍歷過(guò)的元素。所以，如果在body最前面插入一個(gè)元素，會(huì)導(dǎo)致整個(gè)文檔的重新渲染，而在其后插入一個(gè)元素，則不會(huì)影響到前面的元素。

3.獲取某些屬性。
瀏覽器引擎可能會(huì)針對(duì)重排做了優(yōu)化。比如Opera，它會(huì)等到有足夠數(shù)量的變化發(fā)生，或者等到一定的時(shí)間，或者等一個(gè)線程結(jié)束，再一起處理，這樣就只發(fā)生一次重排。但除了渲染樹的直接變化，當(dāng)獲取一些屬性時(shí)，瀏覽器為取得正確的值也會(huì)觸發(fā)重排。這樣就使得瀏覽器的優(yōu)化失效了。這些屬性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用這些值時(shí)應(yīng)進(jìn)行緩存。

此外，改變?cè)氐囊恍邮?，調(diào)整瀏覽器窗口大小等等也都將觸發(fā)重排。

開發(fā)中，比較好的實(shí)踐是盡量減少重排次數(shù)和縮小重排的影響范圍。例如：
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屬性設(shè)為absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會(huì)影響到其他元素。例如有動(dòng)畫效果的元素就最好設(shè)置為絕對(duì)定位。
3. 在內(nèi)存中多次操作節(jié)點(diǎn)，完成后再添加到文檔中去。例如要異步獲取表格數(shù)據(jù)，渲染到頁(yè)面。可以先取得數(shù)據(jù)后在內(nèi)存中構(gòu)建整個(gè)表格的html片段，再一次性添加到文檔中去，而不是循環(huán)添加每一行。
4. 由于display屬性為none的元素不在渲染樹中，對(duì)隱藏的元素操作不會(huì)引發(fā)其他元素的重排。如果要對(duì)一個(gè)元素進(jìn)行復(fù)雜的操作時(shí)，可以先隱藏它，操作完成后再顯示。這樣只在隱藏和顯示時(shí)觸發(fā)2次重排。
5. 在需要經(jīng)常取那些引起瀏覽器重排的屬性值時(shí)，要緩存到變量。

在最近幾次面試中比較常問(wèn)的一個(gè)問(wèn)題：在前端如何實(shí)現(xiàn)一個(gè)表格的排序。如果應(yīng)聘者的方案中考慮到了如何減少重繪和重排的影響，將是使人滿意的方案。

參考文檔：
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 Rendering I – 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