repaint和reflow

repaint(重繪) ,repaint發生更改時,元素的外觀被改變,且在沒有改變佈局的狀況下發生,如改變outline,visibility,background color,不會影響到dom結構渲染。 css

reflow(渲染),與repaint區別就是他會影響到dom的結構渲染,同時他會觸發repaint,他會改變他自己與全部父輩元素(祖先),這種開銷是很是昂貴的,致使性能降低是必然的,頁面元素越多效果越明顯。 express

什麼時候發生: 瀏覽器

1. DOM元素的添加、修改(內容)、刪除( Reflow + Repaint)
2. 僅修改DOM元素的字體顏色(只有Repaint,由於不須要調整佈局)
3. 應用新的樣式或者修改任何影響元素外觀的屬性
4. Resize瀏覽器窗口、滾動頁面
5. 讀取元素的某些屬性(offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))  緩存

如何避免: app

1. 先將元素從document中刪除,完成修改後再把元素放回原來的位置
2. 將元素的display設置爲」none」,完成修改後再把display修改成原來的值
3. 若是須要建立多個DOM節點,可使用DocumentFragment建立完後一次性的加入document    dom

var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode('keenboy test 111'));
fragment.appendChild(document.createElement('br'));
fragment.appendChild(document.createTextNode('keenboy test 222'));
document.body.appendChild(fragment); 佈局

4. 集中修改樣式    4.1儘量少的修改元素style上的屬性    4.2儘可能經過修改className來修改樣式   4.3經過cssText屬性來設置樣式值     element.style.width=」80px」;  //reflow     element.style.height=」90px」; //reflow     element.style.border=」solid 1px red」; //reflow     以上就產生屢次reflow,調用的越多產生就越多     element.style.cssText=」width:80px;height:80px;border:solid 1px red;」; //reflow    4.4緩存Layout屬性值      var left=elem.offsetLeft; 屢次使用left也就產生一次reflow   4.5設置元素的position爲absolute或fixed     元素脫離標準流,也從DOM樹結構中脫離出來,在須要reflow時只須要reflow自身與下級元素   4.6儘可能不要用table佈局     table元素一旦觸發reflow就會致使table裏全部的其它元素 reflow。在適合用table的場合,能夠設置table-layout爲auto或fixed,這樣可讓table一行一行的渲染,這種作法也是爲了限制reflow的影響範圍   4.7避免使用expression,他會每次調用都會從新計算一遍(包括加載頁面)
相關文章
相關標籤/搜索