重排和重绘

重排：当DOM树变化影响了元素几何属性（宽、高等等）浏览器此时需要重新计算几何属性；并且页面其他元素的几何属性也受到了影响；这样渲染树就发生了变化；需要充排（reflow）

重绘：当DOM的变化仅仅影响了背景色等等非几何属性；就发生了重绘；布局没有变化；

触发重排： 页面初始渲染

                  添加、删除可见DOM元素

　　　　    改变元素位置

                  改变元素尺寸（宽、高、内外边距、边框等）

                  改变元素内容（文本或图片等）

                  改变窗口尺寸

不同情况下重排的范围和程度会不同

某些情况下甚至会发生整个页面、比如滑动滚动条

浏览器优化：渲染队列 

　　用js修改div样式       div.style.left='10px';

　　　　　　　　　　　div.style.top='10px';

　　　　　　　　　　　div.style.width='10px';

　　　　　　　　　　　div.style.height='10px';

       这样我们修改了元素的 left、top、width、height属性

       满足了发生重排的条件 。理论上会发生四次重排

       但是实际只发生了一次

       因为我们现代的浏览器都有渲染队列的机制

        当我改变了元素的一个样式会导致浏览器发生重排或者重绘时候

       它会进入一个渲染队列

        然后浏览器继续往下看，若果还有样式修改同样加入队伍

 　　直到没有样式修改

 　　浏览器会按照渲染队列批量执行来优化重排过程，一并修改样式

        把四次重排优化为一次

       

          但如果我们想在后台打印

        

          千万不要写这样的代码，因为发生了4次重排
          不懂了，不是说浏览器有渲染队列优化机制吗？
          为什么这样写就会发生4次重排
          因为offsetLeft/Top/Width/Height非常叼
          它们会强制刷新队列要求样式修改任务立刻执行
          想一想其实这么做是有道理的
          毕竟浏览器不确定在接下来的代码中你是否还会修改同样的样式
         为了保证获得正确的值，它不得不立刻执行渲染队列触发重排（错的不是我，是这个世界）

         

    以下属性或方法会刷新渲染队列

•   offsetTop、offsetLeft、offsetWidth、offsetHeight
•   clientTop、clientLeft、clientWidth、clientHeight
•   scrollTop、scrollLeft、scrollWidth、scrollHeight
•   getComputedStyle()（IE中currentStyle）
• 

  

  

元素批量修改

现在我们想要向ul中循环添加大量li
（如果ul还不存在，最好的办法是先循环添加li到ul，然后再把ul添加到文档，1次重排）

var ul = document.getElementById('demo');
for(var i = 0; i < 1e5; i++){
    var li = document.createElement('li');
    var text = document.createTextNode(i);
    li.appendChild(text);
    ul.appendChild(li);
}

我可以做出下面的优化

var ul = document.getElementById('demo');
ul.style.display = 'none'; <--
for(var i = 0; i < 1e5; i++){
    var li = document.createElement('li');
    var text = document.createTextNode(i);
    li.appendChild(text);
    ul.appendChild(li);
}
ul.style.display = 'block'; <--

var ul = document.getElementById('demo');
var frg = document.createDocumentFragment(); <--
for(var i = 0; i < 1e5; i++){
    var li = document.createElement('li');
    var text = document.createTextNode(i);
    li.appendChild(text);
    frg.appendChild(li); <--
}
ul.appendChild(frg); <--

var ul = document.getElementById('demo');
var clone = ul.cloneNode(true); <--
for(var i = 0; i < 1e5; i++){
    var li = document.createElement('li');
    var text = document.createTextNode(i);
    li.appendChild(text);
    clone.appendChild(li); <--
}
ul.parentNode.replaceChild(clone,ul); <--

上面的方法减少重绘和重排的原理很简单

• 元素脱离文档
• 改变样式
• 元素回归文档

而改变元素就分别使用了隐藏元素、文档碎片和克隆元素
上面的方法我认为仅仅是理论上可以优化重排重绘次数
现代浏览器的优化可能会超过我们的想象