回流(重排)和重绘

1. 描述：

   重绘：页面中元素发生可见性变化(比如颜色等)，导致页面重新渲染的现象称为重绘。

   回流(重排)：页面中元素发生位置和尺寸的变化，导致部分页面回整个页面重新加载的现象称为回流(重排)。

2. 说明：

   (1) 回流(重排)必将引起重绘，但重绘不一定会引起回流(重排)。

   (2) 这两个现象都是浏览器加载页面是可能导致加载变慢的问题，就要尽可能避免。

3. 减少回流和重绘的途径

   描述：因为页面中各种操作基本都会引发回流和重绘，因此完全避免是不可能的。所以为了提高浏览器的性能，我们要尽可能的减少引发回流和重绘的状况。

   途径：

   • 不要一项一项的去改变样式，尽可能一次性写完(可以写在一起，不要被打断就行)，最好使用.style、.style.cssText、className或者classList

   • 读写dom尽量放在一起

   • 当大量读写操作无法避免的时候，可以使用文档碎片节点documentFragment来解决

   • 使用fixed和absoluted能够减少回流和重绘

    
    
    
    
    


    

    123