頁面的重匯和回流


重匯和回流的簡介:

1. 當render tree中的一部分(或全部)因為元素的規模尺寸,布局,隱藏等改變而需要重新構建。這就稱為回流(reflow)。每個頁面至少需要一次回流,就是在頁面第一次加載的時候。在回流的時候,瀏覽器會使渲染樹中受到影響的部分失效,並重新構造這部分渲染樹,完成回流后,瀏覽器會重新繪制受影響的部分到屏幕中,該過程成為重繪。

2. 當render tree中的一些元素需要更新屬性,而這些屬性只是影響元素的外觀,風格,而不會影響布局的,比如background-color。則就叫稱為重繪。

注意:回流必將引起重繪,而重繪不一定會引起回流。

**什么時候會發生回流?

當頁面布局和幾何屬性改變時候就需要回流。下面的情況會引發瀏覽器的回流:

1:添加或者刪除可見的DOM元素

2:元素位置改變;

3:元素尺寸改變----邊距、填充、邊框、高度和寬度

4:內容改變---比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變

5:頁面渲染初始化

6:瀏覽器窗口尺寸改變---resize事件發生時

**什么時候發生重繪?

1.改變字體

2.增加或者移除樣式表

3.內容變化(input框輸入文字)

4.激活css偽類    eg   :hover

5.計算offsetWidth、offsetHeigth屬性(瀏覽器的可見高度)

6.設置style屬性的值

3.如何減少回流、重繪

減少回流、重繪其實就是需要減少對render tree的操作(合並多次DOM和樣式的修改),並減少對一些style信息的請求,盡量利用好瀏覽器的優化策略。具體方法:

1. 直接改變className,如果動態改變樣式,則使用cssText(考慮沒有優化的瀏覽器)

2. 讓要操作的元素進行”離線處理”,處理完后一起更新

a) 使用DocumentFragment進行緩存操作,引發一次回流和重繪;

<script type="text/javascript">
var fragment=document.createDocumentFragment();
var spanNode=document.createElement("div");
for(var i =0;i<10;i++){
(function(i){
spanNode.innerHTML=spanNode.innerHTML+"number:"+i+"<br>";
fragment.appendChild(spanNode);
})(i)
}
document.body.appendChild(fragment);
</script>

b) 使用display:none技術,只引發兩次回流和重繪;
c) 使用cloneNode(true or false) 和 replaceChild 技術,引發一次回流和重繪;

3.不要經常訪問會引起瀏覽器flush隊列的屬性,如果你確實要訪問,利用緩存

4. 讓元素脫離動畫流,減少回流的Render Tree的規模 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com