大量的数据，如何渲染到页面上：

<h1>渲染一万条数据</h1>
<a href="https://baidu.com" target="_blank">百度一下</a>
<ul class="content"></ul>
<script>
  console.log(1);
  // 总数据
  const total = 10000,
  // 每次处理数据
  each = 20,
  // 需要处理次数
  needTimes = Math.ceil(total / each),
  // 父容器
  content = document.querySelector('.content')
  // 当前处理次数
  let currentTime = 0
  // 处理元素插入
  function add() {
    console.log(3);
    const fragment = document.createDocumentFragment()
    for (let i = 0; i < each; i++) {
      const li = document.createElement('li')
      li.innerText = Math.floor(i+currentTime*each)
      fragment.appendChild(li)
    }
    content.appendChild(fragment)
    currentTime++;
    if (currentTime < needTimes) {
      window.requestAnimationFrame(add)
    }
  }
  window.requestAnimationFrame(add)
  console.log(2)
</script>

优化1、

　　fragment 是一个指向空DocumentFragment对象的引用，DocumentFragments 是DOM节点。它们不是主DOM树的一部分。

通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树，在DOM树中，文档片段被其所有的子元素所代替。

因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面重排。

因此，使用文档片段通常会带来更好的性能。

优化2、

　　1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或重排中完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。由系统决定回调函数的执行时机,不会引起丢帧，不会卡顿

　　2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这就意味着更少的的CPU，GPU和内存使用量

　　3、requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销