js中性能优化之分时函数

定义

一次执行完的函数，拆分成多次执行。

适用场景

1、 项目中长列表渲染加载（如果不需要一次性加载出来可以使用懒加载方式处理）
2、 WebQQ 的 QQ 好友列表，一次加载可能需要创建成百上千个dom节点。
3、 大批量的数据需要在前端处理（高频面试题）

实现原理

将本来一次执行完毕的函数，分成几次异步进行执行，在保证功能和体验的同时降低浏览器性能开销。我们可以采用setInterval 函数进行异步拆分分批次调用需要执行的函数，然后再传入执行的函数、拆分的时间间隔和渲染频率即可。

代码实现

    /**
     *
     *
     * @param {*} list // 需要用到的总数据
     * @param {*} fn // 具体执行的操作函数
     * @param {*} count // 每次操作的数量
     * @param {number} [time=200] // 分割的时间
     * @return {*} 
     */
    const chunkTime = (list, fn, count, time = 200) => {
      let timeId;
      const start = () => {
        // 每次分割执行的数量
        for (let index = 0; index < Math.min(count || 1, list.length); index++) {
          const element = list.shift();
          fn(element);
        }
      }

      return () => {
        timeId = setInterval(() => {
          // 如果所有数据执行完毕，清除定时器
          if (list.length === 0) return clearInterval(timeId);
          start();
        }, time)
      }
    }

上述代码使用setInterval方法实现一个分时执行的函数，我们把需要执行逻辑封装成函数传入进去即可。

测试

    let ary = [];
    for ( var i = 1; i <= 1000; i++ ){
      ary.push( i );
    };

    const renderFriendList = chunkTime( ary, function( n ){
      let div = document.createElement( 'div' );
      div.innerHTML = n;
      document.body.appendChild( div );
    }, 10 );

    renderFriendList();