使用异步、分割解决同步处理大量数据造成卡顿的问题

有的时候可能会涉及大量数据的同步处理，但是我们知道同步处理的一个很严重的问题就是阻碍进程，就是卡顿，比如下面的这段代码：

data.map(val=>{
  console.log(val * 2);
})

如果数据量只有几千、几万的时候或许还好，但是如果数据量过大，那么就会造成很明显的卡顿。不但会阻碍渲染，还会阻碍用户的交互事件。

可以做一个时间的测试:

function handleData(data){
    data.map(val=>{
      // 可能会有很多东西在这里
      return val * 2;
    })
}

var data = Array(10000000); data.fill(1);
console.time("Timer");
handleData(data);
console.timeEnd("Timer") 

在我的台式上测试结果为1s以上，如果在手机端或者低性能的设备上，可能会更久。意思就是当处理器到达timeEnd这个地方的时候，已经经过了至少1s时间。

那么就可以考虑使用异步分割处理的方式，确保不会阻碍渲染和用户事件。

直接修改上面的例子：

function handleData(data){
    var chunk = data.splice(0, 1000);
    chunk.map(val=>val*2);
    
    if(data.length > 0) {
      setTimeout(()=>{
         handleData(data);
      }, 0);
    }
}

var data = Array(10000000); data.fill(1);
console.time("Timer");
handleData(data);
console.timeEnd("Timer") 

我本地测试结果是25ms左右，虽然处理所有数据的总时间可能更长了，但是好处就是这是一连串的异步处理，并不会影响其他的流程。不会造成页面卡顿的问题。