使用異步、分割解決同步處理大量數據造成卡頓的問題

waltr 發布于2019-08-20 16:06 / 1458人閱讀

摘要：意思就是當處理器到達這個地方的時候，已經經過了至少時間。那么就可以考慮使用異步分割處理的方式，確保不會阻礙渲染和用戶事件。不會造成頁面卡頓的問題。

有的時候可能會涉及大量數據的同步處理，但是我們知道同步處理的一個很嚴重的問題就是阻礙進程，就是卡頓，比如下面的這段代碼：

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的同步與異步大量數據處理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82717.html

網易云捕性能踩坑解決之道上篇

摘要：從零開始設計開發一個日處理數據億的大數據高并發實時系統，哪些性能問題需要特別注意這里我們一起梳理一下本文中我將以，同學戲稱的系統網易云捕設計開發實踐中兩年的時間里碰到的真實問題，踩過的坑及解決問題的方法和大家一起討論如何解決這些問題。本文由作者余寶虹授權網易云社區發布。從零開始設計開發一個日處理數據8億的大數據高并發實時系統，哪些性能問題需要特別注意？這里我們一起梳理一下,本文中我...

李義 2019-06-28 11:08 評論0 收藏0
夯實基礎-JavaScript異步編程

摘要：調用棧被清空，消息隊列中并無任務，線程停止，事件循環結束。不確定的時間點請求返回，將設定好的回調函數放入消息隊列。調用棧執行完畢執行消息隊列任務。請求并發回調函數執行順序無法確定。異步編程 JavaScript中異步編程問題可以說是基礎中的重點，也是比較難理解的地方。首先要弄懂的是什么叫異步？我們的代碼在執行的時候是從上到下按順序執行，一段代碼執行了之后才會執行下一段代碼，這種方式...

shadowbook 2019-08-22 17:16 評論0 收藏0
前端性能優化常用總結

摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發者，性能是我們關注的指標。前端發展以來，優化方式，琳瑯滿目，有雅虎軍規等。所以，接下來我會從三個方面就前端性能進行總結網絡方面操作及渲染方面數據方面。前言對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業務的繁雜程度去決定優化程度的。作為一個前端開發者，性能是我們關注的指標。它直接影響著我們...

oliverhuang 2019-08-30 13:46 評論0 收藏0
前端性能優化常用總結

摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發者，性能是我們關注的指標。前端發展以來，優化方式，琳瑯滿目，有雅虎軍規等。所以，接下來我會從三個方面就前端性能進行總結網絡方面操作及渲染方面數據方面。前言對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業務的繁雜程度去決定優化程度的。作為一個前端開發者，性能是我們關注的指標。它直接影響著我們...

walterrwu 2019-08-01 17:45 評論0 收藏0