在咱们的业务中咱们会常常遇到大数据渲染，很早之前咱们思考到有用到虚构列表,[
IntersectionObserver穿插观察器](https://mp.weixin.qq.com/s?__...),前端分页查问来优化大数据量渲染

最近在读《javascripts设计模式与开发实际》发现有了另外一种计划分时函数

注释开始...

假如当初后端给了1000条数据，当初前端须要展现

这不简略吗，不思考性能状况下，间接循环创立dom渲染不就能够了吗？

于是你写了demo测试一下

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>大数据</title>    <style>      * {        padding: 0px;        margin: 0px;      }    </style>  </head>  <body>    <div id="app"></div>  </body>  </html>

引入js

  // arr后端mock数据  var arr = [];  var max = 1000;  for (let i = 0; i < max; i++) {    arr.push(i);  }  function renderList(sourceData) {    const domApp = document.getElementById('app');    const len = sourceData.length;    for (let i = 0; i < len; i++) {      const divDom = document.createElement('div');      divDom.innerHTML = sourceData[i];      domApp.appendChild(divDom);    }  }  console.time('start');  renderList(arr);  console.timeEnd('start');

在控制台打印发现执行工夫start: 5.104248046875 ms

以上是比拟粗犷的形式，拿到后端数据间接在前端循环数据，而后渲染,然而这种性能十分的低。

分时函数

参考《javascript设计模式与开发实际》，分时函数次要思维是利用定时器，在一次性渲染1000条数据，我把这1000条数据宰割成若干份，在指定工夫内分片渲染完

具体参考下以下代码

 var arr = []; var max = 1000; for (let i = 0; i < max; i++) {    arr.push(i); }// 创立一个分时函数const timerChunk = (sourceArr, callback, count = 1, wait = 200) => {  let ret, timer = null;  const renderData = () => {    for (let i=0;i<Math.min(count, sourceArr.length);i++) {      // 取出数据      ret = sourceArr.shift();      callback(ret)    }  return function() {    if (!timer) {      timer = setInterval(() => {        // 如果数据取完了，清空定时器        if (sourceArr.length === 0) {          clearInterval(timer);          return;        }        renderData();      }, wait)    }  }    }}const createElem = (res) => {      const appDom = document.getElementById('app');      const divDom = document.createElement('div');      divDom.innerHTML = res;      appDom.appendChild(divDom);  };var curentRender = timerChunk(arr, (res) => {    createElem(res);    // 每次取10条数据，200ms}, 10, 200); console.time('start'); curentRender(); // start: 0.0341796875 ms console.timeEnd('start');

咱们通过分时函数解决后，工夫大略就是start: 0.037841796875 ms

比照以上两种，应用分时函数后，速度进步了近120倍，因而应用分时函数优化大数据量渲染是很有必要的。

总结

1、大数据量渲染暴力循环间接渲染性能差
2、分时函数解决大数据量渲染页面性能高
3、本文示例code example