成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用異步、分割解決同步處理大量數(shù)據(jù)造成卡頓的問(wèn)題

waltr / 1483人閱讀

摘要：意思就是當(dāng)處理器到達(dá)這個(gè)地方的時(shí)候，已經(jīng)經(jīng)過(guò)了至少時(shí)間。那么就可以考慮使用異步分割處理的方式，確保不會(huì)阻礙渲染和用戶事件。不會(huì)造成頁(yè)面卡頓的問(wèn)題。

有的時(shí)候可能會(huì)涉及大量數(shù)據(jù)的同步處理，但是我們知道同步處理的一個(gè)很嚴(yán)重的問(wèn)題就是阻礙進(jìn)程，就是卡頓，比如下面的這段代碼：

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

如果數(shù)據(jù)量只有幾千、幾萬(wàn)的時(shí)候或許還好，但是如果數(shù)據(jù)量過(guò)大，那么就會(huì)造成很明顯的卡頓。不但會(huì)阻礙渲染，還會(huì)阻礙用戶的交互事件。

可以做一個(gè)時(shí)間的測(cè)試:

function handleData(data){
    data.map(val=>{
      // 可能會(huì)有很多東西在這里
      return val * 2;
    })
}

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

在我的臺(tái)式上測(cè)試結(jié)果為1s以上，如果在手機(jī)端或者低性能的設(shè)備上，可能會(huì)更久。意思就是當(dāng)處理器到達(dá)timeEnd這個(gè)地方的時(shí)候，已經(jīng)經(jīng)過(guò)了至少1s時(shí)間。

那么就可以考慮使用異步分割處理的方式，確保不會(huì)阻礙渲染和用戶事件。

直接修改上面的例子：

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")

我本地測(cè)試結(jié)果是25ms左右，雖然處理所有數(shù)據(jù)的總時(shí)間可能更長(zhǎng)了，但是好處就是這是一連串的異步處理，并不會(huì)影響其他的流程。不會(huì)造成頁(yè)面卡頓的問(wèn)題。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82717.html

相關(guān)文章

  • 網(wǎng)易云捕性能踩坑解決之道上篇

    摘要：從零開(kāi)始設(shè)計(jì)開(kāi)發(fā)一個(gè)日處理數(shù)據(jù)億的大數(shù)據(jù)高并發(fā)實(shí)時(shí)系統(tǒng)，哪些性能問(wèn)題需要特別注意這里我們一起梳理一下本文中我將以，同學(xué)戲稱的系統(tǒng)網(wǎng)易云捕設(shè)計(jì)開(kāi)發(fā)實(shí)踐中兩年的時(shí)間里碰到的真實(shí)問(wèn)題，踩過(guò)的坑及解決問(wèn)題的方法和大家一起討論如何解決這些問(wèn)題。 本文由作者余寶虹授權(quán)網(wǎng)易云社區(qū)發(fā)布。 從零開(kāi)始設(shè)計(jì)開(kāi)發(fā)一個(gè)日處理數(shù)據(jù)8億的大數(shù)據(jù)高并發(fā)實(shí)時(shí)系統(tǒng)，哪些性能問(wèn)題需要特別注意？這里我們一起梳理一下,本文中我...

    李義 評(píng)論0 收藏0

  • 夯實(shí)基礎(chǔ)-JavaScript異步編程

    摘要：調(diào)用棧被清空，消息隊(duì)列中并無(wú)任務(wù)，線程停止，事件循環(huán)結(jié)束。不確定的時(shí)間點(diǎn)請(qǐng)求返回，將設(shè)定好的回調(diào)函數(shù)放入消息隊(duì)列。調(diào)用棧執(zhí)行完畢執(zhí)行消息隊(duì)列任務(wù)。請(qǐng)求并發(fā)回調(diào)函數(shù)執(zhí)行順序無(wú)法確定。 異步編程 JavaScript中異步編程問(wèn)題可以說(shuō)是基礎(chǔ)中的重點(diǎn)，也是比較難理解的地方。首先要弄懂的是什么叫異步？ 我們的代碼在執(zhí)行的時(shí)候是從上到下按順序執(zhí)行，一段代碼執(zhí)行了之后才會(huì)執(zhí)行下一段代碼，這種方式...

    shadowbook 評(píng)論0 收藏0

  • 前端性能優(yōu)化常用總結(jié)

    摘要：前言對(duì)于前端的性能話題，從來(lái)都沒(méi)有斷絕過(guò)。作為一個(gè)前端開(kāi)發(fā)者，性能是我們關(guān)注的指標(biāo)。前端發(fā)展以來(lái)，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來(lái)我會(huì)從三個(gè)方面就前端性能進(jìn)行總結(jié)網(wǎng)絡(luò)方面操作及渲染方面數(shù)據(jù)方面。 前言 對(duì)于前端的性能話題，從來(lái)都沒(méi)有斷絕過(guò)。因?yàn)檫@個(gè)東西沒(méi)有最好，只有更好。而且往往也是業(yè)務(wù)的繁雜程度去決定優(yōu)化程度的。作為一個(gè)前端開(kāi)發(fā)者，性能是我們關(guān)注的指標(biāo)。它直接影響著我們...

    oliverhuang 評(píng)論0 收藏0

  • 前端性能優(yōu)化常用總結(jié)

    摘要：前言對(duì)于前端的性能話題，從來(lái)都沒(méi)有斷絕過(guò)。作為一個(gè)前端開(kāi)發(fā)者，性能是我們關(guān)注的指標(biāo)。前端發(fā)展以來(lái)，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來(lái)我會(huì)從三個(gè)方面就前端性能進(jìn)行總結(jié)網(wǎng)絡(luò)方面操作及渲染方面數(shù)據(jù)方面。 前言 對(duì)于前端的性能話題，從來(lái)都沒(méi)有斷絕過(guò)。因?yàn)檫@個(gè)東西沒(méi)有最好，只有更好。而且往往也是業(yè)務(wù)的繁雜程度去決定優(yōu)化程度的。作為一個(gè)前端開(kāi)發(fā)者，性能是我們關(guān)注的指標(biāo)。它直接影響著我們...

    walterrwu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<