回流与重绘

回流 通俗来讲就是重新渲染页面 当我们页面的元素定位 位置发生改变更新 就会使页面重新渲染

重绘 是更新页面样式 没有进行页面布局定位的更新

---

为了解决多次重绘问题 我们通常用 creatDomcumentFragment（）来解决问题

这是一个虚拟对象 可以装任何节点元素 把我们所需要的东西放入到这个对象中

当我们需要渲染页面时 只需放入虚拟对象中 再将对象放入页面进行一次渲染

<script>
    /*
      我要动态渲染3个div到页面上

      append appendChild replaceChild remove removeChild insertBefore

      createDocumentFragment 文档片段 文档气泡 感冒药胶囊 临时容器 可以往里面放任何的节点元素 元素列表 等等

    */

    drawHtml(3, 'div');
    function drawDom(num, tagName) {
      var vDom;
      var fragment = document.createDocumentFragment();//文档片段
      console.log(fragment);
      for (var i = 0; i < num; i++) {
        vDom = document.createElement(tagName); //
        fragment.appendChild(vDom); //放到临时容器fragment里
        // document.body.appendChild(vDom); //重复N次 每次渲染一个标签
      }
      document.body.appendChild(fragment);  //一次渲染渲染N个
    }
</script>