|
|
原文標題：Speed up your JavaScript, Part 1
原文作者：Nicholas C. Zakas
在我 上一篇帖子 （譯文 ） 中，談到了各個瀏覽器究竟會在什么情況下彈出腳本失控提示，對于InterNET Explorer 來說，當瀏覽器執行了數量過多的語句時就會停止執行腳本，而其他的瀏覽器，則是持續執行腳本超過一定時間的時候就會給出提示。而我們要探討的核心問題，不是這些瀏覽器如果探測失控的腳本，而是我們如何才可以讓腳本運行的更快一些，從而避免這些警告 。
腳本失控基本上有以下四個方面的原因：
在循環中執行了太多的操作。
臃腫的函數體
過多的遞歸
過多的 DOM 調用
在這篇帖子中，我將會把重點放到第一條上：循環中的過多操作。循環的操作是同步進行的，所以執行一個循環所花費的時間完全取決于循環的次數。因此有 兩種情況會導致循環執行的時間過長，并直接導致鎖定瀏覽器。一是循環體中包含了太多的操作，二是循環的次數過多。這兩種情況都能直接導致鎖定瀏覽器，并顯示腳本失控的提示。
解決這個問題的訣竅就是用下面這兩個問題來評估每個循環：
這個循環必須要同步執行么？
循環里面的數據，必須要按順序執行么？
如果兩個問題的答案都是否定的話，你就可以選擇將循環 里的操作進行分解。關鍵是要根據代碼的具體環境確定上面兩個問題的答案。一個典型的循環可能像下面這個樣子：
復制代碼 代碼如下:
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 的代碼開發模式，可以幫助優化數組的處理性能，還可以避免那個腳本失控的警告。
JavaScript技術：JavaScript 提升運行速度之循環篇 譯文，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
