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

資訊專欄INFORMATION COLUMN

定時(shí)器學(xué)習(xí)：利用定時(shí)器分解耗時(shí)任務(wù)案例

Nino / 3137人閱讀

摘要：對于執(zhí)行時(shí)間過長的腳本，有的瀏覽器會(huì)彈出警告，說頁面無響應(yīng)。一個(gè)代碼塊長時(shí)間運(yùn)行，將會(huì)導(dǎo)致其他任何任務(wù)都必須等待。而其他瀏覽器，比如上的瀏覽器，將默認(rèn)終止運(yùn)行時(shí)間超過秒鐘的腳本。利用定時(shí)器來分解任務(wù)，關(guān)鍵點(diǎn)有兩個(gè)。實(shí)際上每行耗時(shí)約左右。

對于執(zhí)行時(shí)間過長的腳本，有的瀏覽器會(huì)彈出警告，說頁面無響應(yīng)。有的瀏覽器會(huì)直接終止腳本?？偠灾?，瀏覽器不希望某一個(gè)代碼塊長時(shí)間處于運(yùn)行狀態(tài)，因?yàn)閖s是單線程的。一個(gè)代碼塊長時(shí)間運(yùn)行，將會(huì)導(dǎo)致其他任何任務(wù)都必須等待。從用戶體驗(yàn)上來說，很有可能發(fā)生頁面渲染卡頓或者點(diǎn)擊事件無響應(yīng)的狀態(tài)。

如果一段腳本的運(yùn)行時(shí)間超過5秒，有些瀏覽器（比如Firefox和Opera）將彈出一個(gè)對話框警告用戶該腳本“無法響應(yīng)”。而其他瀏覽器，比如iPhone上的瀏覽器，將默認(rèn)終止運(yùn)行時(shí)間超過5秒鐘的腳本。--《JavaScript忍者秘籍》

JavaScript忍者秘籍里有個(gè)很好的比喻：頁面上發(fā)生的各種事情就好像一群人在討論事情，如果有個(gè)人一直在說個(gè)不停，其他人肯定不樂意。我們希望有個(gè)裁判，定時(shí)的切換其他人來說話。

Js利用定時(shí)器來分解任務(wù)，關(guān)鍵點(diǎn)有兩個(gè)。

按什么維度去分解任務(wù)

任務(wù)的現(xiàn)場保存與現(xiàn)場恢復(fù)

例子

要求：動(dòng)態(tài)創(chuàng)建一個(gè)表格，一共10000行，每行10個(gè)單元格

一次性創(chuàng)建

總共耗時(shí)180ms, 瀏覽器已經(jīng)給出警告！[Violation] "setTimeout" handler took 53ms。

分批次動(dòng)態(tài)創(chuàng)建

這次異步按批次創(chuàng)建，沒有耗時(shí)的警告。因?yàn)榭刂屏嗣看未a在50ms內(nèi)運(yùn)行。實(shí)際上每80行耗時(shí)約10ms左右。這就不會(huì)引起頁面卡頓等問題。

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

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

相關(guān)文章

  • React16性能改善的原理一

    摘要：接下來看下偽代碼調(diào)度算法偽代碼原來這段寫的匆忙且不好，重新更新了一篇講調(diào)度算法的大概實(shí)現(xiàn)性能改善的原理二。 問題背景 React16 更新了底層架構(gòu)，新架構(gòu)主要解決更新節(jié)點(diǎn)過多時(shí)，頁碼卡頓的問題。譬如如下代碼，根據(jù)用戶輸入的文字生成10000行數(shù)據(jù)，用戶輸入框會(huì)出現(xiàn)卡頓現(xiàn)象。 class App extends React.Component { constructor( prop...

    zhangqh 評論0 收藏0

  • JS高級入門教程

    摘要：解析首先簡稱是由歐洲計(jì)算機(jī)制造商協(xié)會(huì)制定的標(biāo)準(zhǔn)化腳本程序設(shè)計(jì)語言。級在年月份成為的提議，由核心與兩個(gè)模塊組成。通過引入統(tǒng)一方式載入和保存文檔和文檔驗(yàn)證方法對進(jìn)行進(jìn)一步擴(kuò)展。其中表示的標(biāo)記位正好是低三位都是。但提案被拒絕了。 JS高級入門教程 目錄 本文章定位及介紹 JavaScript與ECMAScript的關(guān)系 DOM的本質(zhì)及DOM級介紹 JS代碼特性 基本類型與引用類型 JS的垃...

    zsy888 評論0 收藏0

  • JavaScript同步和異步

    摘要：異步如果在函數(shù)返回的時(shí)候，調(diào)用者還不能購得到預(yù)期結(jié)果，而是將來通過一定的手段得到例如回調(diào)函數(shù)，這就是異步。的意思是，將回調(diào)函數(shù)立刻插入消息隊(duì)列，等待執(zhí)行，而不是立即執(zhí)行。 大家好，我是wmingren，小伙伴們都知道JavaScript是單線程的語言，所謂的單線程呢就是指如果有多個(gè)任務(wù)就必須去排隊(duì)，前面任務(wù)執(zhí)行完成后，后面任務(wù)再執(zhí)行。到這里我們就產(chǎn)生了一個(gè)疑問，既然是單線程的，又怎么會(huì)...

    Eirunye 評論0 收藏0

  • 前端性能優(yōu)化之 JavaScript

    摘要：大多數(shù)情況下，對一個(gè)直接量和一個(gè)局部變量數(shù)據(jù)訪問的性能差異是微不足道的。 前端性能優(yōu)化之 JavaScript 前言 本文為 《高性能 JavaScript》 讀書筆記，是利用中午休息時(shí)間、下班時(shí)間以及周末整理出來的，此書雖有點(diǎn)老舊，但談?wù)摰男阅軆?yōu)化話題是每位同學(xué)必須理解和掌握的，業(yè)務(wù)響應(yīng)速度直接影響用戶體驗(yàn)。 一、加載和運(yùn)行 大多數(shù)瀏覽器使用單進(jìn)程處理 UI 更新和 JavaScri...

    Coding01 評論0 收藏0

  • Javascript學(xué)習(xí)總結(jié) - JS基礎(chǔ)系列三

    摘要：案例每隔毫秒調(diào)用函數(shù)并顯示時(shí)間。當(dāng)點(diǎn)擊按鈕時(shí)，停止時(shí)間代碼如下計(jì)時(shí)器每隔毫秒調(diào)用函數(shù)，并將返回值賦值給計(jì)時(shí)器計(jì)時(shí)器，在載入后延遲指定時(shí)間后去執(zhí)行一次表達(dá)式僅執(zhí)行一次。該值標(biāo)識要取消的延遲執(zhí)行代碼塊。 簡述 本系列將持續(xù)更新Javascript基礎(chǔ)部分的知識，誰都想掌握高端大氣的技術(shù)，但是我覺得沒有一個(gè)扎實(shí)的基礎(chǔ)，我認(rèn)為一切高階技術(shù)對我來講都是過眼云煙，要成為一名及格的前端工程師，必須把...

    zlyBear 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<