本文轉至:http://www.blogjava.net/BearRui/archive/2010/05/10/web_performance_repaint_relow.html
頁面呈現流程
注:從上面可以看出,迴流必將引起重繪,而重繪不一定會引起迴流。
什麼操作會引起重繪、迴流
s.padding = "2px"; // 迴流+重繪
s.border = "1px solid red"; // 再一次 迴流+重繪
s.color = "blue"; // 再一次重繪
s.backgroundColor = "#ccc"; // 再一次 重繪
s.fontSize = "14px"; // 再一次 迴流+重繪
// 添加node,再一次 迴流+重繪
document.body.appendChild(document.createTextNode('abc!'));
從上個實例代碼中可以看到幾行簡單的JS代碼就引起了6次左右的迴流、重繪。而且我們也知道迴流的花銷也不小,如果每句JS操作都去迴流重繪的話,瀏覽器可能就會受不了。所以很多瀏覽器都會優化這些操作,瀏覽器會維護1個隊列,把所有會引起迴流、重繪的操作放入這個隊列,等隊列中的操作到了一定的數量或者到了一定的時間間隔,瀏覽器就會把flush隊列,進行一個批處理。這樣就會讓多次的迴流、重繪變成一次迴流重繪。
雖然有了瀏覽器的優化,但有時候我們寫的一些代碼可能會強制瀏覽器提前flush隊列,這樣瀏覽器的優化可能就起不到作用了。當你請求向瀏覽器請求一些style信息的時候,就會讓瀏覽器flush隊列,比如:
1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. width,height
5. 請求了getComputedStyle(), 或者 ie的 currentStyle
當你請求上面的一些屬性的時候,瀏覽器爲了給你最精確的值,需要flush隊列,因爲隊列中可能會有影響到這些值的操作。
如何減少迴流、重繪
減少迴流、重繪其實就是需要減少對render tree的操作,並減少對一些style信息的請求,儘量利用好瀏覽器的優化策略。具體方法有:
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top = top + "px";
// 比較好的寫法
el.className += " className1";
// 比較好的寫法
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
2. 讓要操作的元素進行"離線處理",處理完後一起更新,這裏所謂的"離線處理"即讓元素不存在於render tree中,比如:
a) 使用documentFragment或div等元素進行緩存操作,這個主要用於添加元素的時候,大家應該都用過,就是先把所有要添加到元素添加到1個div(這個div也是新加的),
最後才把這個div append到body中。
b) 先display:none 隱藏元素,然後對該元素進行所有的操作,最後再顯示該元素。因對display:none的元素進行操作不會引起迴流、重繪。所以只要操作只會有2次迴流。
3 不要經常訪問會引起瀏覽器flush隊列的屬性,如果你確實要訪問,就先讀取到變量中進行緩存,以後用的時候直接讀取變量就可以了,見下面代碼:
for(循環) {
el.style.left = el.offsetLeft + 5 + "px";
el.style.top = el.offsetTop + 5 + "px";
}
// 這樣寫好點
var left = el.offsetLeft,top = el.offsetTop,s = el.style;
for(循環) {
left += 10;
top += 10;
s.left = left + "px";
s.top = top + "px";
}
4. 考慮你的操作會影響到render tree中的多少節點以及影響的方式,影響越多,花費肯定就越多。比如現在很多人使用jquery的animate方法移動元素來展示一些動畫效果,想想下面2種移動的方法:
// 如果是在自己的上面,則需要重繪,這裏不會引起迴流
$("#block1").animate({left:50});
// 而且改變的是marginLeft屬性,所以這裏每次改變不但會影響重繪,
// 還會引起父元素及其下元素的迴流
實例測試
最後用2個工具對上面的理論進行一些測試,這2個工具是在我 "web 性能測試工具推薦" 文章中推薦過的工具,分別是:dynaTrace(測試ie),Speed Tracer(測試Chrome)。
第一個測試代碼不改變元素的規則,大小,位置。只改變顏色,所以不存在迴流,僅測試重繪,代碼如下:
<script type="text/javascript">
var s = document.body.style;
var computed;
if (document.body.currentStyle) {
computed = document.body.currentStyle;
} else {
computed = document.defaultView.getComputedStyle(document.body, '');
}
function testOneByOne(){
s.color = 'red';;
tmp = computed.backgroundColor;
s.color = 'white';
tmp = computed.backgroundImage;
s.color = 'green';
tmp = computed.backgroundAttachment;
}
function testAll() {
s.color = 'yellow';
s.color = 'pink';
s.color = 'blue';
tmp = computed.backgroundColor;
tmp = computed.backgroundImage;
tmp = computed.backgroundAttachment;
}
</script>
color test <br />
<button onclick="testOneByOne()">Test One by One</button>
<button onclick="testAll()">Test All</button>
</body>
我們先點擊Test One by One按鈕,然後點擊 Test All,用dynaTrace監控如下:
上圖可以看到我們執行了2次button的click事件,每次click後都跟一次rendering(頁面重繪),2次click函數執行的時間都差不多,0.25ms,0.26ms,但其後的rendering時間就相差一倍多。(這裏也可以看出,其實很多時候前端的性能瓶頸並不在於JS的執行,而是在於頁面的呈現,這種情況在用JS做到富客戶端中更爲突出)。我們再看圖的下面部分,這是第一次rendering的詳細信息,可以看到裏面有2行是 Scheduleing layout task,這個就是我們前面討論過的瀏覽器優化過的隊列,可以看出我們引發2次的flush。
再看第二次rendering的詳細信息,可以看出並沒有Scheduleing layout task,所以這次rendering的時間也比較短。
測試代碼2:這個測試跟第一次測試的代碼很類似,但加上了對layout的改變,爲的是測試迴流。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script type="text/javascript">
var s = document.body.style;
var computed;
if (document.body.currentStyle) {
computed = document.body.currentStyle;
} else {
computed = document.defaultView.getComputedStyle(document.body, '');
}
function testOneByOne(){
s.color = 'red';
s.padding = '1px';
tmp = computed.backgroundColor;
s.color = 'white';
s.padding = '2px';
tmp = computed.backgroundImage;
s.color = 'green';
s.padding = '3px';
tmp = computed.backgroundAttachment;
}
function testAll() {
s.color = 'yellow';
s.padding = '4px';
s.color = 'pink';
s.padding = '5px';
s.color = 'blue';
s.padding = '6px';
tmp = computed.backgroundColor;
tmp = computed.backgroundImage;
tmp = computed.backgroundAttachment;
}
</script>
color test <br />
<button onclick="testOneByOne()">Test One by One</button>
<button onclick="testAll()">Test All</button>
</body>
用dynaTrace監控如下:
相信這圖不用多說大家都能看懂了吧,可以看出有了迴流後,rendering的時間相比之前的只重繪,時間翻了3倍了,可見迴流的高成本性啊。
大家看到時候注意明細處相比之前的多了個 Calcalating flow layout。
最後再使用Speed Tracer測試一下,其實結果是一樣的,只是讓大家瞭解下2個測試工具:
測試1:
圖上第一次點擊執行2ms(其中有50% 用於style Recalculation), 第二次1ms,而且第一次click後面也跟了2次style Recalculation,而第二次點擊卻沒有style Recalculation。
但是這次測試發現paint重繪的時間竟然是一樣的,都是3ms,這可能就是chrome比IE強的地方吧。
測試2:
從圖中竟然發現第二次的測試結果在時間上跟第一次的完全一樣,這可能是因爲操作太少,而chrome又比較強大,所以沒能測試明顯結果出來,
但注意圖中多了1個紫色部分,就是layout的部分。也就是我們說的迴流。
有需要請查看:高性能WEB開發系列