性能優化之快速響應的用戶界面

用於執行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的缺陷還是太多了。用不起來，而且要慎用。