1. 用ajax获取到需要处理的数据， 共13万条
    2. 将数组分组，每组500条，一共260组
    3. 循环这260组数据，分别处理每一组数据， 利用setTimeout函数开启一个新的执行线程（异步），防止主线程因渲染大量数据导致阻塞

分片渲染可以优化页面的dom过多的问题，但这种方法现在也几乎不会用了，一般会使用虚拟列表方法去优化

JavaScript如何一次性展示几万条数据 https://zhuanlan.zhihu.com/p/25817653

echarts appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比
https://blog.csdn.net/weixin_41290949/article/details/109028114

一次性渲染

Js执行很快，但是页面渲染要将近5秒，如果是一百万条数据，渲染将近一分钟

  1. <ul id="wrap"></ul>
  3. const total = 100000;
  4. let time = new Date();
  6. for (let i = 0;i < total;i++) {
  7.   let li = document.createElement('li');
  8.   li.innerHTML = i;
  9.   document.getElementById('wrap').appendChild(li);
  10. }
  12. console.log('js执行时间', new Date() - time);//js执行时间 710
  13. setTimeout(function () {
  14.   console.log('页面渲染时间', new Date() - time);//页面渲染时间 4771
  15. });

分片渲染

分片渲染用的时间会比没分片长，好处就是

  • 不需要等所有渲染出来，可以直接看到数据
  • 拖动滚动条，还能看见页面还在加载
  • 新版本浏览器对页面渲染做了优化，会等js执行完毕一次性更新页面
  • 用requestAnimationFrame这个宏任务替代定时器，性能会稍微好一些 ```jsx

    const total = 100000; let time = new Date(); let index = 0; let id = 0;

    function loadList() { index += 50; if (index < total) { setTimeout(function () { for (let i = 0;i < 50;i++) { let li = document.createElement(‘li’); li.innerHTML = id++; document.getElementById(‘wrap’).appendChild(li); } loadList(); }); } } loadList(); ```