阅读数:71 评论数:0

一、概述

将本来一次执行完毕的函数，分成几次异步进行执行，在保证功能和体验的同时降低浏览器性能开销。

二、实现

方式一

    /**
     *
     *
     * @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)
      }
    }

    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();

方式二

function performChunk(datas, taskHandler, scheduler){
  if(typeof datas === 'number') {
    datas = {length: datas};
  }
  if( datas.length===0) return;
  let i = 0;
  // 执行下一块任务
  function _run(){
    if(i>=datas.length) return;
    scheduler((taskIsGoOn)=>{
      while(taskIsGoOn()&&i<datas.length){
        taskHandler(data[i],i);
        i++;
      }
      _run();
    });
  }
  _run();
}

function browserPerformChunk(datas,taskHandler){
  const scheduler = (taskFn)=>{
    requestIdleCallback((idle)=>{
      taskFn(()=>idle.timeRemaining()>0);
    })
  }
  performChunk(datas,taskHandler,scheduler);
}

function commonPerformChunk(datas,taskHandler){
  const scheduler = (taskFn)=>{
    setTimeout(()=>{
      const start = Date.now();
      taskFn(()=>Date.now()-start<50);
    },100);
  };
  performChunk(datas,taskHandler,scheduler);
}