瀏覽器重繪與重排的效能優化
重繪與重排
當DOM變化影響了元素的幾何屬性（寬、高改變等等）
瀏覽器此時需要重新計算元素幾何屬性
並且頁面中其他元素的幾何屬性可能會受影響
這樣渲染樹就發生了改變，也就是重新構造RenderTree渲染樹
這個過程叫做重排（reflow）
如果DOM變化僅僅影響的了背景色等等非幾何屬性
此時就發生了重繪（repaint）而不是重排
因為佈局沒有發生改變
不管頁面發生了重繪還是重排，它們都會影響效能（重繪還好一些）
能避免要儘量避免
觸發重排
頁面佈局和元素幾何屬性的改變就會導致重排
下列情況會發生重排
- 頁面初始渲染
- 新增/刪除可見DOM元素
- 改變元素位置
- 改變元素尺寸（寬、高、內外邊距、邊框等）
- 改變元素內容（文字或圖片等）
- 改變視窗尺寸
不同的條件下發生重排的範圍及程度會不同
某些情況甚至會重排整個頁面，比如滑動滾動條
瀏覽器的優化：渲染佇列
舉個小例子
比如我們想用js中修改一個div元素的樣式
寫下了以下程式碼
div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';- 1
- 2
- 3
- 4
我們修改了元素的left、top、width、height屬性
滿足我們發生重排的條件
理論上會發生4次重排
但是實際上只會發生1次重排
這是因為我們現代的瀏覽器都有渲染佇列的機制
當我改變了元素的一個樣式會導致瀏覽器發生重排或重繪時
它會進入一個渲染佇列
然後瀏覽器繼續往下看，如果下面還有樣式修改
那麼同樣入隊
直到下面沒有樣式修改
瀏覽器會按照渲染佇列批量執行來優化重排過程，一併修改樣式
這樣就把本該4次的重排優化為1次
但是我們現在想要修改樣式後在控制檯列印
div.style.left = '10px';
console.log(div.offsetLeft);
div.style.top = '10px';
console.log(div.offsetTop);
div.style.width = '20px';
console.log(div.offsetWidth);
div.style.height = '20px';
console.log(div.offsetHeight);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
千萬不要寫這樣的程式碼，因為發生了4次重排
有同學可能不懂了，不是說瀏覽器有渲染佇列優化機制嗎？
為什麼這樣寫就會發生4次重排
因為offsetLeft/Top/Width/Height非常叼
它們會強制重新整理佇列要求樣式修改任務立刻執行
想一想其實這麼做是有道理的
畢竟瀏覽器不確定在接下來的程式碼中你是否還會修改同樣的樣式
為了保證獲得正確的值，它不得不立刻執行渲染佇列觸發重排（錯的不是我，是這個世界）
以下屬性或方法會重新整理渲染佇列
- offsetTop、offsetLeft、offsetWidth、offsetHeight
- clientTop、clientLeft、clientWidth、clientHeight
- scrollTop、scrollLeft、scrollWidth、scrollHeight
- getComputedStyle()（IE中currentStyle）
我們在修改樣式過程中，要儘量避免使用上面的屬性
重繪與重排的效能優化
分離讀寫操作
瞭解了原理我們就可以對上面的程式碼進行優化
div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';
console.log(div.offsetLeft);
console.log(div.offsetTop);
console.log(div.offsetWidth);
console.log(div.offsetHeight);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
這樣就僅僅發生1次重排了，原因相信大家已經很清晰了
把所有的讀操作移到所有寫操作之後
效率高多了
這是其中一種優化的方法
樣式集中改變
還是我們最初修改樣式的程式碼
div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';- 1
- 2
- 3
- 4
雖然現代瀏覽器有渲染佇列的優化機制
但是古董瀏覽器效率仍然底下，觸發了4次重排
即便這樣，我們仍然可以做出優化
我們需要cssText屬性合併所有樣式改變
div.style.cssText = 'left:10px;top:10px;width:20px;height:20px;';- 1
這樣只需要修改DOM一次一併處理
僅僅觸發了1次重排
而且只用了一行程式碼，看起來相對乾淨一些
不過有一點要注意，cssText會覆蓋已有的行間樣式
如果想保留原有行間樣式，這樣做
div.style.cssText += ';left:10px;';- 1
除了cssText以外，我們還可以通過修改class類名來進行樣式修改
div.className = 'new-class';- 1
這種辦法可維護性好，還可以幫助我們免除顯示性程式碼
（有一點點效能影響，改變class需要檢查級聯樣式，不過瑕不掩瑜）
快取佈局資訊
我覺得快取真是萬金油，哪種效能優化都少不了它
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';- 1
- 2
這種讀操作完就執行寫操作造成了2次重排
快取可以進行優化
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';- 1
- 2
- 3
- 4
這也相當於是分離讀寫操作了
優化為1次重排
元素批量修改
現在我們想要向ul中迴圈新增大量li
（如果ul還不存在，最好的辦法是先迴圈新增li到ul，然後再把ul新增到文件，1次重排）
var ul = document.getElementById('demo');
for(var i = 0; i < 1e5; i++){
var li = document.createElement('li');
var text = document.createTextNode(i);
li.appendChild(text);
ul.appendChild(li);
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
我可以做出下面的優化
var ul = document.getElementById('demo');
ul.style.display = 'none'; <--
for(var i = 0; i < 1e5; i++){
var li = document.createElement('li');
var text = document.createTextNode(i);
li.appendChild(text);
ul.appendChild(li);
}
ul.style.display = 'block'; <--- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
var ul = document.getElementById('demo');
var frg = document.createDocumentFragment(); <--
for(var i = 0; i < 1e5; i++){
var li = document.createElement('li');
var text = document.createTextNode(i);
li.appendChild(text);
frg.appendChild(li); <--
}
ul.appendChild(frg); <--- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
var ul = document.getElementById('demo');
var clone = ul.cloneNode(true); <--
for(var i = 0; i < 1e5; i++){
var li = document.createElement('li');
var text = document.createTextNode(i);
li.appendChild(text);
clone.appendChild(li); <--
}
ul.parentNode.replaceChild(clone,ul); <--- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
上面的方法減少重繪和重排的原理很簡單
- 元素脫離文件
- 改變樣式
- 元素迴歸文件
而改變元素就分別使用了隱藏元素、文件碎片和克隆元素
上面的方法我認為僅僅是理論上可以優化重排重繪次數
現代瀏覽器的優化可能會超過我們的想象
轉載自：http://blog.csdn.net/q1056843325/article/details/53340308