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

waltr 发布于2019-08-20 16:06 / 1380人阅读

摘要：意思就是当处理器到达这个地方的时候，已经经过了至少时间。那么就可以考虑使用异步分割处理的方式，确保不会阻碍渲染和用户事件。不会造成页面卡顿的问题。

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

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左右，虽然处理所有数据的总时间可能更长了，但是好处就是这是一连串的异步处理，并不会影响其他的流程。不会造成页面卡顿的问题。

GPU云服务器云服务器大量数据存储的解决方案数据分析解决的问题 ajax的同步与异步大量数据处理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82717.html

网易云捕性能踩坑解决之道上篇

摘要：从零开始设计开发一个日处理数据亿的大数据高并发实时系统，哪些性能问题需要特别注意这里我们一起梳理一下本文中我将以，同学戏称的系统网易云捕设计开发实践中两年的时间里碰到的真实问题，踩过的坑及解决问题的方法和大家一起讨论如何解决这些问题。本文由作者余宝虹授权网易云社区发布。从零开始设计开发一个日处理数据8亿的大数据高并发实时系统，哪些性能问题需要特别注意？这里我们一起梳理一下,本文中我...

李义 2019-06-28 11:08 评论0 收藏0
夯实基础-JavaScript异步编程

摘要：调用栈被清空，消息队列中并无任务，线程停止，事件循环结束。不确定的时间点请求返回，将设定好的回调函数放入消息队列。调用栈执行完毕执行消息队列任务。请求并发回调函数执行顺序无法确定。异步编程 JavaScript中异步编程问题可以说是基础中的重点，也是比较难理解的地方。首先要弄懂的是什么叫异步？我们的代码在执行的时候是从上到下按顺序执行，一段代码执行了之后才会执行下一段代码，这种方式...

shadowbook 2019-08-22 17:16 评论0 收藏0
前端性能优化常用总结

摘要：前言对于前端的性能话题，从来都没有断绝过。作为一个前端开发者，性能是我们关注的指标。前端发展以来，优化方式，琳琅满目，有雅虎军规等。所以，接下来我会从三个方面就前端性能进行总结网络方面操作及渲染方面数据方面。前言对于前端的性能话题，从来都没有断绝过。因为这个东西没有最好，只有更好。而且往往也是业务的繁杂程度去决定优化程度的。作为一个前端开发者，性能是我们关注的指标。它直接影响着我们...

walterrwu 2019-08-01 17:45 评论0 收藏0
前端性能优化常用总结

摘要：前言对于前端的性能话题，从来都没有断绝过。作为一个前端开发者，性能是我们关注的指标。前端发展以来，优化方式，琳琅满目，有雅虎军规等。所以，接下来我会从三个方面就前端性能进行总结网络方面操作及渲染方面数据方面。前言对于前端的性能话题，从来都没有断绝过。因为这个东西没有最好，只有更好。而且往往也是业务的繁杂程度去决定优化程度的。作为一个前端开发者，性能是我们关注的指标。它直接影响着我们...

luzhuqun 2019-08-21 17:02 评论0 收藏0