JavaScript 万条数据渲染优化方案

假设有10000条数据

<template>
    <ul class="list"></ul>
</template>
<script>
export default {
  data() {
    return {
      list: 10000,
      needcount: 0,//每次处理条数
      eidtCount: 0,//处理次数
      allTime: 0,
    };
  },
};
</script>

方案一

    /**
     *分批处理  并利用setTimeout把逻辑推到宏任务队列中
     */
    dataSelector() {
      let time1 = new Date().getTime();
      let page = 200;
      this.needCount = Math.ceil(this.list / page);
      let liDom = document.querySelector(".list"); //选择器
      setTimeout(() => {
        for (let i = 0; i < page; i++) {
          let li = document.createElement("li");
          li.innerText = Math.floor(i + this.eidtCount * page);
          liDom.appendChild(li);
        }
        this.eidtCount++;
        let time2 = new Date().getTime();
        this.allTime = this.allTime + time2 - time1;
        console.log(this.allTime + "ms", this.eidtCount + "次");
        if (this.eidtCount < this.needCount) this.dataSelector();
      }, 1000 / 60);//1000/60 :浏览器每次执行通常是每秒 60 次一帧 
    },

方案二

 /**
     * 利用createDocumentFragment
     *
     */
    dataFragment() {
      let time1 = new Date().getTime();
      let page = 200;
      this.needcount = Math.ceil(this.list / page);
      let listDom = document.querySelector(".list");
      let domBox = document.createDocumentFragment(); //文档流碎片
      setTimeout(() => {
        for (let i = 0; i < page; i++) {
          let li = document.createElement("li");
          li.innerText = Math.floor(i * this.eidtCount * page);
          domBox.appendChild(li);
        }
        let time2 = new Date().getTime();
        this.eidtCount++;
        this.allTime = this.allTime + time2 - time1;
        console.log(this.allTime + "ms", this.eidtCount + "次");
        if (this.eidtCount < this.needcount) this.dataFragment();
      }, 0); //0立即执行
    },

方案三

 /**
     *
     * 利用 createdocumentfragment() 修改一下createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所 有属性和方法
     */
    dataRequest() {
      let time1 = new Date().getTime();
      let page = 200;
      this.needcount = Math.ceil(this.list / page);
      let listDom = document.querySelector(".list");
      let domBox = document.createDocumentFragment();
      for (let i = 0; i < page; i++) {
        let li = document.createElement("li");
        li.innerText = Math.floor(i * this.eidtCount * page);
        listDom.appendChild(li);
      }
      this.eidtCount++;
      let time2 = new Date().getTime();
      this.allTime = this.allTime + time2 - time1;
      console.log(this.allTime + "ms", this.eidtCount + "次");
      if (this.eidtCount < this.needcount)
        window.requestAnimationFrame(this.dataRequest);
    }