maic

V1

2022/06/15阅读:12主题:红绯

分时函数优化页面性能

在我们的业务中我们会经常遇到大数据渲染,很早之前我们考虑到有用到虚拟列表, 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>
      * {
        padding0px;
        margin0px;
      }
    
</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
}, 10200);
 console.time('start');
 curentRender(); // start: 0.0341796875 ms
 console.timeEnd('start');

我们通过分时函数处理后,时间大概就是start: 0.037841796875 ms

对比以上两种,使用分时函数后,速度提高了近120倍,因此使用分时函数优化大数据量渲染是很有必要的。

总结

1、大数据量渲染暴力循环直接渲染性能差 2、分时函数处理大数据量渲染页面性能高 3、本文示例code[1]

参考资料

[1]

code: https://github.com/maicFir/lessonNote/tree/master/javascript/12-大数据

分类:

前端

标签:

JavaScript

作者介绍

maic
V1

公众号:Web技术学苑