重绘与重排

• 重绘
  -是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
  -触发重绘的条件：改变元素外观属性。如：color，background-color等。
• 重排（重构/回流/reflow）
  -当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
  -重排必定会引发重绘，但重绘不一定会引发重排
  
• 优化
  1.减少重绘和重排就是要减少对渲染树的操作，则我们可以合并多次的DOM和样式的修改。并减少对style样式的请求。
  -将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素
  -如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document；
  Eg:

 var fragment = document.createDocumentFragment();
    for(let i=0;i<100;i++){

      var li = document.createElement('li');

      li.innerHTML = 'apple'+i;

      fragment.appendChild(li);

    }
    document.getElementById('fruit').appendChild(fragment);

2.浏览器自己的优化，浏览器会维护1个队列，把所有会引起回流、重绘进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。