溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
用于執行JavaScript和更新用戶界面的進程通常被稱為“瀏覽器UI線程”。JavaScript和用戶界面更新在同一個進程中運行，因此一次只能處理一件事情。
·任何JavaScript任務都不應當執行超過100毫秒，過長的運行時間導致UI更新出現明顯延遲，從而會影響用戶體驗。
·瀏覽器有兩類限制JavaScript任務的運行時間的機制，調用棧大小限制（即記錄自腳本開始以來執行的語句的數量）和長時間運行腳本限制（記錄腳本執行的總時長，超時的時候會有彈框提示用戶[chrome沒有單獨的程云霞腳本限制，替代做法是依賴其通用奔潰檢測系統來處理此類問題]）。
一些優化JavaScript任務時間的常見做法：
①使定時器讓出時間片段
1.使用定時器處理數組。當處理過程不須同步，數據不須按順序處理時。即可考慮用定時器分解任務。
如：
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!')
});
②分割任務
如果一個函數的運行時間過長，那么可以把它拆分為一系列能在較短時間內完成的子函數。
如：
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!');
})
}
③記錄代碼的運行時間
有時每次只執行一個任務的效率不高，且在兩次之間產生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應用中的使用數量。
④使用Worker
Web Worker是新版瀏覽器支持的特性，它允許在UI線程外部執行JavaScript代碼，從而避免鎖定UI。
參考資料：http://www.alloyteam.com/2015/11/deep-in-web-worker/
備注：
個人覺得，Worker的缺陷還是太多了。用不起來，而且要慎用。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
