在我们的业务中，我们常常会遇到大数据渲染，很早之前我们考虑到有用到虚拟列表,IntersectionObserver交叉观察器,
前端分页查询来优化大数据量渲染
最近在读《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[1]
