DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 解決JavaScript循環中的過多操作
解決JavaScript循環中的過多操作
編輯:關於JavaScript     

根據Nicholas的說法,有四種代碼會拖慢腳本的運行,並最終導致腳本失控。分別是次數過多的同步循環、龐大的函數體、不恰當的遞歸和不合理的DOM調用。這篇著重講第一個原因。最後給出了一個開發模式,替換傳統的循環結構,可以完全避免腳本失控的狀況發生。

原文標題:Speed up your JavaScript, Part 1
原文

以前談到了各個浏覽器究竟會在什麼情況下彈出腳本失控提示,對於Internet Explorer來說,當浏覽器執行了數量過多的語句時就會停止執行腳本,而其他的浏覽器,則是持續執行腳本超過一定時間的時候就會給出提示。而我們要探討的核心問題,不是這些浏覽器如果探測失控的腳本,而是我們如何才可以讓腳本運行的更快一些,從而避免這些警告。

腳本失控基本上有以下四個方面的原因:

  1. 在循環中執行了太多的操作。
  2. 臃腫的函數體
  3. 過多的遞歸
  4. 過多的DOM調用

在這篇帖子中,我將會把重點放到第一條上:循環中的過多操作。循環的操作是同步進行的,所以執行一個循環所花費的時間完全取決於循環的次數。因此有兩種情況會導致循環執行的時間過長,並直接導致鎖定浏覽器。一是循環體中包含了太多的操作,二是循環的次數過多。這兩種情況都能直接導致鎖定浏覽器,並顯示腳本失控的提示。

解決這個問題的訣竅就是用下面這兩個問題來評估每個循環:

  1. 這個循環必須要同步執行麼?
  2. 循環裡面的數據,必須要按順序執行麼?

如果兩個問題的答案都是否定的話,你就可以選擇將循環裡的操作進行分解。關鍵是要根據代碼的具體環境確定上面兩個問題的答案。一個典型的循環可能像下面這個樣子:

for(var i=0; i < items.length; i++){
   process(items[i]);
}

乍一看這個循環並沒有太大的問題,是不是會運行很長時間完全取決於循環的次數。如果緊接循環後沒有其他代碼在執行的時候需要依賴於循環的結果,那麼對於第一個問題的答案就是“不”。你還可以發現,循環每次只處理一個數值,而且不依賴於上一次循環的結果,所以對於第二個問題的答案同樣也是否定的。這就意味著,循環可以通過某種方式進行拆解,不會導致鎖定浏覽器而顯示腳本失控的提示。

在《Professional JavaScript, Second Edition》這本書中,對於那些執行次數非常巨大的虛幻,我推薦使用下面的方式來處理:

function chunk(array, process, context){
   setTimeout(function(){
       var item = array.shift();
       process.call(context, item);

       if (array.length > 0){
           setTimeout(arguments.callee, 100);
       }
   }, 100);
}

chunk()函數的用途就是將一個數組分成小塊處理(這也是名字的由來),我們可以傳遞三個參數。要處理的數組對象、處理函數以及一個可選的上下文變量,用於設置process()函數中對應的this對象。第一個timer用於處理操作之間的延時(這裡設置為100毫秒,大家可以根據實際需要自行修改)。每次執行這個函數,都會將數組中的第一個對象取出,並傳給process()函數進行操作,如果這時process()中還有未處理完的對象,另外一個timer就會啟動,用於重復等待。上面提到的循環,可以通過下面的方法使用這個函數:

chunk(items, process);

需要注意的是,在這裡數組采用了隊列(queue)的形式,而且在循環的過程中,每次都會發生修改。如果你要修改數組的原始狀態,這裡介紹兩種途徑:一種是通過concat()函數,在傳遞之前,建立一個當前數組的副本:

chunk(items.concat(), process);

另外一種選擇是直接修改chunk()函數,直接在函數內部進行修改:

function chunk(array, process, context){
   var items = array.concat();   //clone the array
   setTimeout(function(){
       var item = items.shift();
       process.call(context, item);

       if (items.length > 0){
           setTimeout(arguments.callee, 100);
       }
   }, 100);
}

注意這種方法要比只保存一個索引安全的多,因為數組的內容在下次計時器生效之前可能會發生變化。

這裡提到的chunk()函數,只是優化循環性能的一個起點。你可以根據需要不斷改進它,讓它擁有更多的功能。比如說,在數組中所有對象都處理完成以後,可以增加一個函數回調。無論你是否會按照這種方式對函數進行修改,這只是一種JavaScript的代碼開發模式,可以幫助優化數組的處理性能,還可以避免那個腳本失控的警告。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved