js 性能優(yōu)化之快速響應(yīng)的用戶界面

發(fā)布時間：2020-10-25 15:12:38 來源：腳本之家閱讀：182 作者：小蚊欄目：web開發(fā)

用于執(zhí)行JavaScript和更新用戶界面的進(jìn)程通常被稱為“瀏覽器UI線程”。JavaScript和用戶界面更新在同一個進(jìn)程中運行，因此一次只能處理一件事情。

·任何JavaScript任務(wù)都不應(yīng)當(dāng)執(zhí)行超過100毫秒，過長的運行時間導(dǎo)致UI更新出現(xiàn)明顯延遲，從而會影響用戶體驗。

·瀏覽器有兩類限制JavaScript任務(wù)的運行時間的機(jī)制，調(diào)用棧大小限制（即記錄自腳本開始以來執(zhí)行的語句的數(shù)量）和長時間運行腳本限制（記錄腳本執(zhí)行的總時長，超時的時候會有彈框提示用戶[chrome沒有單獨的程云霞腳本限制，替代做法是依賴其通用奔潰檢測系統(tǒng)來處理此類問題]）。

一些優(yōu)化JavaScript任務(wù)時間的常見做法：

①使定時器讓出時間片段

1.使用定時器處理數(shù)組。當(dāng)處理過程不須同步，數(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的延遲就更不好了。所以可以添加時間檢測機(jī)制來改進(jìn)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)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持億速云！

向AI問一下細(xì)節(jié)

js 性能優(yōu)化之快速響應(yīng)的用戶界面

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽