『壹』 JS操作大量Dom數據時，假死現象
1:JS中大量的DOM操作也會導致事件響應緩慢甚至真正卡死瀏覽器，如在IE6下一次插入大量的HTML。而如果真的彈出了「腳本運行時間過長「的提示框則說明你的JS腳本肯定有死循環或者進行過深的遞歸操作了。
2:這時候需要對腳本進行優化，其步驟如下：
第一步，優化循環，循環體中包含太多的操作和循環的次數過多都會導致循環執行時間過長，並直接導致鎖死瀏覽器。如果循環之後沒有其他操作，每次循環只處理一個數值，而且不依賴於上一次循環的結果則可以對循環進行拆解，看下面的chunk的函數：
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函數處理，如果數組中還有對象沒有被處理則啟動下一個timer，直到數組處理完。這樣可保證腳本不會長時間佔用處理機，使瀏覽器出一個高響應的流暢狀態。
其實看來，藉助JS強大的閉包機制任何循環都是可拆分的，下面的版本增加了callback機制，使可再循環處理完畢之後進行其他的操作。
function chunk(array,process,cbfun){
var i=0,len = array.length; //這里要注意在執行過程中數組最好是不變的
setTimeout(function(){
process( array[i], i++); //循環體要做的操作
if( i < len ){
setTimeout(arguments.callee,100)
}else{
cbfun() //循環結束之後要做的操作
}
}
}
第二步，優化函數，如果函數體內有太多不相干但又要一起執行的操作則可以進行拆分，考慮下面的函數：
function dosomething(){
dosomething1();
dosomething2();
}
dosomething1和dosomething2互不相干，執行沒有先後次序，可用前面提到的chunk函數進行拆分：
function dosomething(){
chunk([dosomething1,dosomething2],function(item){item();})
}
或者直接交給瀏覽器去調度
function dosome(){
setTimeout(dosomething1,0);
setTimeout(dosomething2,0);
}
第三步，優化遞歸操作，函數遞歸雖然簡單直接但是過深的遞歸操作不但影響性能而且稍不注意就會導致瀏覽器彈出腳本失控對話框，必須小心處理。
看以下斐波那契數列的遞歸演算法：
function fibonacci(n){
return n <2? n: fibonacci(n -1)+ fibonacci(n -2);
};
fibonacci(40)這條語句將重復調用自身331160280次,在瀏覽器中執行必然導致腳本失控，而採用下面的演算法則只需要調用40次
fibonacci =function(n){
var memo ={0:0,1:0}; //計算結果緩存
var shell =function(n){
var result = memo[n];
if(typeof result !='number') //如果值沒有被計算則進行計算
memo[n]= shell(n-1)+ shell(n -2)
return memo[n];
}
return shell(n);
}
這項技術被稱為memoization,他的原理很簡單就是同樣的結果沒必要計算兩次。另一種消除遞歸的辦法就是利用迭代，遞歸和迭代經常會被作為互相彌補的方法。
第四步，減少DOM操作，DOM操作的代價是相當昂貴的，大多數DOM操作都會觸發瀏覽器的迴流(reflow)操作。例如添加刪除節點，修改元素樣式，獲取需要經過計算的元素樣式等。我們要做的就是盡量少的觸發迴流操作。
el.style.width ='300px' el.style.height ='300px' el.style.backgroundColor ='red'
上面的操作會觸發瀏覽器的三次迴流操作，再看下面的方式：
el.className ='newStyle'
通過設置改元素的className一次設置多個樣式屬性，將樣式寫再CSS文件中，只觸發一次迴流，達到了同樣是效果而且效率更高。因為瀏覽器最擅長的就是根據class設置樣式。
還有很多可以減少DOM操作的方法，在此就不多說了，但是一個基本的原則就是讓瀏覽器去做它自己擅長的事情，例如通過class來改變元素的屬性。
相信經過上面的優化的過程必定可以大大提高用戶體驗，不會出現瀏覽器被鎖死和彈出腳本失控的對話框，使你的瀏覽器從繁重的任務中解放出來。需要指出的是上面這些優化並不是必須的，只有當一段腳本的執行時間真的影響到了用戶體驗才需要進行。雖然讓用戶覺得腳本的執行變快了，但其實完成同一個操作的時間可能被延長了，這些技術只是讓瀏覽器處於一個快速響應的狀態，使瀏覽更流暢。