資訊專欄INFORMATION COLUMN
摘要：意思就是當處理器到達這個地方的時候，已經(jīng)經(jīng)過了至少時間。那么就可以考慮使用異步分割處理的方式，確保不會阻礙渲染和用戶事件。不會造成頁面卡頓的問題。
有的時候可能會涉及大量數(shù)據(jù)的同步處理，但是我們知道同步處理的一個很嚴重的問題就是阻礙進程，就是卡頓，比如下面的這段代碼：
data.map(val=>{
console.log(val * 2);
})
如果數(shù)據(jù)量只有幾千、幾萬的時候或許還好，但是如果數(shù)據(jù)量過大，那么就會造成很明顯的卡頓。不但會阻礙渲染，還會阻礙用戶的交互事件。
可以做一個時間的測試:
function handleData(data){
data.map(val=>{
// 可能會有很多東西在這里
return val * 2;
})
}
var data = Array(10000000); data.fill(1);
console.time("Timer");
handleData(data);
console.timeEnd("Timer")
在我的臺式上測試結(jié)果為1s以上，如果在手機端或者低性能的設(shè)備上，可能會更久。意思就是當處理器到達timeEnd這個地方的時候，已經(jīng)經(jīng)過了至少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")
我本地測試結(jié)果是25ms左右，雖然處理所有數(shù)據(jù)的總時間可能更長了，但是好處就是這是一連串的異步處理，并不會影響其他的流程。不會造成頁面卡頓的問題。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/82717.html
摘要：從零開始設(shè)計開發(fā)一個日處理數(shù)據(jù)億的大數(shù)據(jù)高并發(fā)實時系統(tǒng)，哪些性能問題需要特別注意這里我們一起梳理一下本文中我將以，同學戲稱的系統(tǒng)網(wǎng)易云捕設(shè)計開發(fā)實踐中兩年的時間里碰到的真實問題，踩過的坑及解決問題的方法和大家一起討論如何解決這些問題。 本文由作者余寶虹授權(quán)網(wǎng)易云社區(qū)發(fā)布。 從零開始設(shè)計開發(fā)一個日處理數(shù)據(jù)8億的大數(shù)據(jù)高并發(fā)實時系統(tǒng)，哪些性能問題需要特別注意？這里我們一起梳理一下,本文中我...
摘要：調(diào)用棧被清空，消息隊列中并無任務(wù)，線程停止，事件循環(huán)結(jié)束。不確定的時間點請求返回，將設(shè)定好的回調(diào)函數(shù)放入消息隊列。調(diào)用棧執(zhí)行完畢執(zhí)行消息隊列任務(wù)。請求并發(fā)回調(diào)函數(shù)執(zhí)行順序無法確定。 異步編程 JavaScript中異步編程問題可以說是基礎(chǔ)中的重點，也是比較難理解的地方。首先要弄懂的是什么叫異步？ 我們的代碼在執(zhí)行的時候是從上到下按順序執(zhí)行，一段代碼執(zhí)行了之后才會執(zhí)行下一段代碼，這種方式...
摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發(fā)者，性能是我們關(guān)注的指標。前端發(fā)展以來，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來我會從三個方面就前端性能進行總結(jié)網(wǎng)絡(luò)方面操作及渲染方面數(shù)據(jù)方面。 前言 對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業(yè)務(wù)的繁雜程度去決定優(yōu)化程度的。作為一個前端開發(fā)者，性能是我們關(guān)注的指標。它直接影響著我們...
摘要：前言對于前端的性能話題，從來都沒有斷絕過。作為一個前端開發(fā)者，性能是我們關(guān)注的指標。前端發(fā)展以來，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來我會從三個方面就前端性能進行總結(jié)網(wǎng)絡(luò)方面操作及渲染方面數(shù)據(jù)方面。 前言 對于前端的性能話題，從來都沒有斷絕過。因為這個東西沒有最好，只有更好。而且往往也是業(yè)務(wù)的繁雜程度去決定優(yōu)化程度的。作為一個前端開發(fā)者，性能是我們關(guān)注的指標。它直接影響著我們...
閱讀 1847·2021-11-22 15:33
閱讀 2224·2021-10-08 10:04
閱讀 3635·2021-08-27 13:12
閱讀 3515·2019-08-30 13:06
閱讀 1559·2019-08-29 16:43
閱讀 1488·2019-08-29 16:40
閱讀 872·2019-08-29 16:15
閱讀 2841·2019-08-29 14:13
