大数据渲染解决方案

一，渲染大量数据会造成卡顿

渲染大量数据造成浏览器卡顿甚至卡死的原因是因为操作dom次数太频繁，所有要解决这个问题就得减少dom操作次数。像vue和react之所以性能比jquery好，其中一个重要的原因就是因为vue和react是通过虚拟dom来操作的，而虚拟dom本质就是通过js对象来模拟真实的dom节点

二，在处理这个问题之前先了解两个知识点

1.documentFragment：documentFragment是一个虚拟的Dom列表，可以储存待处理的html片段,一个没有父对象的最小文档对象,可以将它当作一个Document使用。因为它不在真实的Dom结构中，所以对它所做的操作不会触发浏览器的回流，只会在将它插入dom的时候触发一次而已。

2.requestAnimationFrame：requestAnimationFrame 是由浏览器专门为动画提供的 API，requestAnimationFrame 不需要设置回调时间，跟着浏览器的重绘的钩子走。这种做法更加高效，不会失帧或者卡顿，更大程度的保证了动画的流畅性。在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了 CPU 开销。

综上可以获得解决渲染大量数据的一个方法，通过虚拟dom和分段渲染方式，先使用 document.createDocumentFragment() 创建虚拟文档碎片节点，再使用 requestAnimationFrame 分段渲染

二，案例

渲染100万条数据

<div id="app"></div>

<script>
    const app = document.querySelector('#app')
    const fra = document.createDocumentFragment() //创建文档碎片节点
    let all = 100_0000,     //总数
       num = 20,           // 每个片段20条数据
       batch = all / num,  // 总共片段数量
       count = 0           // 已经添加的片段数
    function add() {
         for (let i = 0; i < num; i++) {
               const div = document.createElement('div')
               div.innerText = `你好，欢迎你，你是第${count * num + i}个`
               fra.appendChild(div)
         }
         app.appendChild(fra)
         count++
         (count < batch) && requestAnimationFrame(add)
         
     }
     add()
</script>