关于javascript:分时函数优化大数据量渲染

38次阅读

共计 1915 个字符，预计需要花费 5 分钟才能阅读完成。

在咱们的业务中咱们会常常遇到大数据渲染，很早之前咱们思考到有用到虚构列表,[
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

正文完