在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪(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:
|
1 2 3 4 5 6 7 |
var changeDiv = document.getElementById(‘changeDiv’); changeDiv.style.color = ‘#093′; changeDiv.style.background = ‘#eee’; changeDiv.style.height = ’200px’; |
可以合併為：
CSS:
|
1 2 3 4 5 6 7 8 9 |
div.changeDiv { background: #eee; color: #093; height: 200px; } |
JS:
|
1 |
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