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); 佈局