快捷導(dǎo)航

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

更新時(shí)間：2017年02月15日 16:24:17 作者：小蚊

本文主要介紹了js性能優(yōu)化的快速響應(yīng)的用戶界面。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

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

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

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

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

①使定時(shí)器讓出時(shí)間片段

1.使用定時(shí)器處理數(shù)組。當(dāng)處理過(guò)程不須同步，數(shù)據(jù)不須按順序處理時(shí)。即可考慮用定時(shí)器分解任務(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ù)

如果一個(gè)函數(shù)的運(yùn)行時(shí)間過(guò)長(zhǎng)，那么可以把它拆分為一系列能在較短時(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!');
 })
}

③記錄代碼的運(yùn)行時(shí)間

有時(shí)每次只執(zhí)行一個(gè)任務(wù)的效率不高，且在兩次之間產(chǎn)生25ms的延遲就更不好了。所以可以添加時(shí)間檢測(cè)機(jī)制來(lái)改進(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);
}

注意，定時(shí)器雖然可以提高性能，但是過(guò)度使用會(huì)適得其反。需要控制web應(yīng)用中的使用數(shù)量。

④使用Worker

Web Worker是新版瀏覽器支持的特性，它允許在UI線程外部執(zhí)行JavaScript代碼，從而避免鎖定UI。

參考資料：http://www.alloyteam.com/2015/11/deep-in-web-worker/

備注：

個(gè)人覺得，Worker的缺陷還是太多了。用不起來(lái)，而且要慎用。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: