定時器學習：利用定時器分解耗時任務(wù)案例

Nino 發(fā)布于2019-08-20 15:27 / 3183人閱讀

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

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

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

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

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

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

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

例子

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

一次性創(chuàng)建

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

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

這次異步按批次創(chuàng)建，沒有耗時的警告。因為控制了每次代碼在50ms內(nèi)運行。實際上每80行耗時約10ms左右。這就不會引起頁面卡頓等問題。

云服務(wù)器 GPU云服務(wù)器任務(wù)定時器 linux定時器任務(wù) 定時任務(wù) 定時任務(wù)與觸發(fā)任務(wù)

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

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

相關(guān)文章

React16性能改善的原理一

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

zhangqh 2019-08-23 15:21 評論0 收藏0
JS高級入門教程

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

zsy888 2019-08-20 14:43 評論0 收藏0
JavaScript同步和異步

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

Eirunye 2019-08-26 11:31 評論0 收藏0
前端性能優(yōu)化之 JavaScript

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

Coding01 2019-08-23 18:10 評論0 收藏0
Javascript學習總結(jié) - JS基礎(chǔ)系列三

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

zlyBear 2019-08-19 17:07 評論0 收藏0