用于執(zhí)行JavaScript和更新用戶界面的進程通常被稱為“瀏覽器UI線程”。JavaScript和用戶界面更新在同一個進程中運行，因此一次只能處理一件事情。
?任何JavaScript任務(wù)都不應(yīng)當執(zhí)行超過100毫秒，過長的運行時間導(dǎo)致UI更新出現(xiàn)明顯延遲，從而會影響用戶體驗。
?瀏覽器有兩類限制JavaScript任務(wù)的運行時間的機制，調(diào)用棧大小限制（即記錄自腳本開始以來執(zhí)行的語句的數(shù)量）和長時間運行腳本限制（記錄腳本執(zhí)行的總時長，超時的時候會有彈框提示用戶[chrome沒有單獨的程云霞腳本限制，替代做法是依賴其通用奔潰檢測系統(tǒng)來處理此類問題]）。
一些優(yōu)化JavaScript任務(wù)時間的常見做法：
①使定時器讓出時間片段
1.使用定時器處理數(shù)組。當處理過程不須同步，數(shù)據(jù)不須按順序處理時。即可考慮用定時器分解任務(wù)。
如：
function processArray(items,process,callback){ var todo = items.concat(); setTimeout(function(){ process(todo.shift()); if(todo.length > 0){ setTimeout(arguments.callee,25); } else { callback(items); } },25);}var items = [1,2,3];function output(value){ console.log(value);} processArray(items,outputValue,function(){ console.log('finished output!')});②分割任務(wù)
如果一個函數(shù)的運行時間過長，那么可以把它拆分為一系列能在較短時間內(nèi)完成的子函數(shù)。
如：
function multistep(steps,args,callback){ var tasks = steps.concat(); setTimeout(function(){ var task = tasks.shift(); task.apply(null,args||[]); if(tasks.length > 0){ setTimeout(arguments.callee,25); } else { callback(); } },25);}function saveDocument(id){ var tasks = [open,write,close]; multistep(tasks,[id],function(){ console.log('finished!'); })} ③記錄代碼的運行時間
有時每次只執(zhí)行一個任務(wù)的效率不高，且在兩次之間產(chǎn)生25ms的延遲就更不好了。所以可以添加時間檢測機制來改進processArray()方法。
如：
function timeProcessArray(items,process,callback){ var todo = items.concat(); setTimeout(function(){ var start = +new Date(); do{ process(todo.shift()); }while(todo.length > 0 &&(+new Date() - start < 50)) ; if(todo.length > 0){ setTimeout(arguments.callee,25); } else { callback(items); } },25);}注意，定時器雖然可以提高性能，但是過度使用會適得其反。需要控制web應(yīng)用中的使用數(shù)量。
④使用Worker
Web Worker是新版瀏覽器支持的特性，它允許在UI線程外部執(zhí)行JavaScript代碼，從而避免鎖定UI。
參考資料：http://www.alloyteam.com/2015/11/deep-in-web-worker/
備注：
個人覺得，Worker的缺陷還是太多了。用不起來，而且要慎用。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網(wǎng)！
新聞熱點
疑難解答
