运用异步、支解处置惩罚同步处置惩罚大批数据形成卡顿的题目

2024年4月9日 229次阅读 来源: Clark

有的时刻能够会触及大批数据的同步处置惩罚，然则我们晓得同步处置惩罚的一个很严重的题目就是障碍历程，就是卡顿，比方下面的这段代码：

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摆布，虽然处置惩罚一切数据的总时候能够更长了，然则优点就是这是一连串的异步处置惩罚，并不会影响其他的流程。不会形成页面卡顿的题目。

    原文作者：Clark
    原文地址: https://segmentfault.com/a/1190000009202327
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞