前端大数据的渲染

1.传统方式

function getData() {
        let arr = [];
        for (let i = 0; i < 100000; i++) {
          arr.push(i);
        }
        return arr;
      }
      
      let data = getData();     
      for (let i = 0; i < 100000 && data.length > 0; i++) {
          let li = document.createElement('li');
          let textStart = document.createTextNode('这是第');
          li.appendChild(textStart);
          let index = document.createTextNode(data[i]);
          li.appendChild(index);
          let textEnd = document.createTextNode('个');
          li.appendChild(textEnd);
          document.getElementById('root').appendChild(li);
        }

2.setTimeout

分批次渲染

function getData() {
        let arr = [];
        for (let i = 0; i < 100000; i++) {
          arr.push(i);
        }
        return arr;
      }
      
      let data = getData();     
      function loadData(n) {
        // 每次渲染100条
        let partialData = data.splice(0, 100);
        for (let i = 0; i < 100 && partialData.length > 0; i++) {
          let li = document.createElement('li');
          let textStart = document.createTextNode('这是第');
          li.appendChild(textStart);
          let index = document.createTextNode(partialData[i]);
          li.appendChild(index);
          let textEnd = document.createTextNode('个');
          li.appendChild(textEnd);
          document.getElementById('root').appendChild(li);
        }
        if (n) {
          setTimeout(() => {
            loadData(n - 1);
          }, 1000)
        }
      }
    loadData(1000);