您好,登錄后才能下訂單哦!
這篇文章主要介紹了javascript性能優(yōu)化之分時(shí)函數(shù)的示例分析,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
分時(shí)函數(shù)和函數(shù)節(jié)流的問題不一樣,函數(shù)節(jié)流針對的事件不是用戶主動調(diào)用的,前面已經(jīng)提過了。
函數(shù)節(jié)流的原理是:延遲當(dāng)前函數(shù)的執(zhí)行,如果該次延遲還沒有完成,那么忽略接下來該函數(shù)的請求。也就是說會忽略掉很多函數(shù)請求。
在一些開發(fā)場景中,我們可能會一次性向文檔中注入上千個(gè)節(jié)點(diǎn),在短時(shí)間內(nèi)向?yàn)g覽器中大量添加DOM節(jié)點(diǎn)可能會讓瀏覽器吃不消,結(jié)果往往會讓瀏覽器卡頓或吃不消,解決方案之一便是使用分時(shí)函數(shù)(timeChunk)。
timeChunk分時(shí)函數(shù)讓創(chuàng)建節(jié)點(diǎn)的工作分批進(jìn)行,比如一秒鐘創(chuàng)建1000個(gè)節(jié)點(diǎn),改為每個(gè)200ms創(chuàng)建10個(gè)節(jié)點(diǎn)。具體timeChunk函數(shù)封裝如下:
function timeChunk( arr, fn, count){//arr 數(shù)組 fn操作函數(shù) count每次操作數(shù)量 var obj, t; var start = function(){ var len = Math.min(count||1,arr.length); for(var i=0; i < len; i++){ obj = arr.shift(); fn(obj) } }; return function(interval){ t = setInterval(function(){ if(arr.length==0){ return clearInterval(t) }; start(); },interval||200) } }
應(yīng)用:
加入我們要在文檔中添加1000個(gè)節(jié)點(diǎn),可以利用timeChunk分時(shí)函數(shù)每200ms連續(xù)添加20個(gè)節(jié)點(diǎn)。
var arr = []; for(var i = 1; i <= 1000; i++){ arr.push(i) } var renderLists = timeChunk(arr,function(i){ var div = document.createElement('div'); div.innerHTML = i; document.body.appendChild(div); },20); renderLists(200);
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“javascript性能優(yōu)化之分時(shí)函數(shù)的示例分析”這篇文章對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。