|
上一篇：解讀javascript的計時器 I
未經(jīng)授權禁止轉載
1、昂貴計算的處理
在復雜Javascript應用程序開發(fā)中，最復雜的可能是用戶界面的單線程特性。而Javascript在處理用戶交互時最好的狀況是反應遲鈍，最糟糕的情況是無響應而導致瀏覽器掛起（在Javascript執(zhí)行時，頁面中所有的更新操作暫停）。源于這一事實，將所有復雜操作（任何多于100ms的計算）減小到可管理的程度就勢在必行。另外，如果運行了至少5秒鐘還沒有停止，一些瀏覽器（如Firefox 、Opera）將產生一個提示框警告用戶腳本無相應。
這顯然是不可取的，產生一個無響應的界面并不好。但是，幾乎可以肯定的是，當你需要處理大量數(shù)據(jù)時就會出現(xiàn)這種情況（如處理數(shù)以千計的DOM元素會導致這種情況出現(xiàn)）。
此時，計時器就顯得尤為有用。由于計時器能有效的暫停Javascript代碼的執(zhí)行，它也能阻止瀏覽器將執(zhí)行的代碼掛起（只要個別代碼還不足以使瀏覽器掛起）。想到這一點，我們可以將正常的、密集的、循環(huán)計算納入到非阻塞的計算之中，讓我們看看下面這個例子，這種類型的計算是必需的。
一個長時運行的任務：
<table><tbody></tbody></table>
// Normal, intensive, operation
var table = document.getElementsByTagName("tbody");
for ( var i = 0; i < 2000; i++ ) {
var tr = document.createElement("tr");
for ( var t = 0; t < 6; t++ ){
var td = document.createElement("td");
td.appendChild( document.createTextNode("" + t));
tr.appendChild( td );
}
table.appendChild( tr );
}
}
在這個例子中，我們創(chuàng)建了總數(shù)為26000個DOM節(jié)點，并將數(shù)字填入表中，這太昂貴了，很有可能將瀏覽器掛起以阻止用戶正常的交互。我們可以將計時器引入其中，從而得到與眾不同，也許更好的結果。
用計時器將耗時較長的任務拆分開來：
<table><tbody></tbody></table>
var table = document.getElementsByTagName("tbody");
var i = 0, max = 1999;
setTimeout(function(){
for ( var step = i + 500; i < step; i++ ) {
var tr = document.createElement("tr");
for ( var t = 0; t < 6; t++ ){
var td = document.createElement("td");
td.appendChild( document.createTextNode("" + t));
tr.appendChild( td );
}
}
table.appendChild( tr );
}
if ( i < max )
setTimeout( arguments.callee, 0 );
}, 0);
在我們修改的例子中，我們將密集的計算分成四部分，每個創(chuàng)建6500個節(jié)點。這些計算不太可能中斷瀏覽器正常的流。最糟糕的情況也只是這些數(shù)字可能隨時調整（例如，使其在250-500之間變化，這樣我們的每一個單元將產生3500DOM個節(jié)點）。但是，給人印象最深的是我們如何改變我們的代碼以適應新的異步系統(tǒng)。我們需要做更多的工作以確保元素的數(shù)字正確生成（該循環(huán)不會永無休止）。這些代碼與我們初始的很相似。注意，我們使用閉包維持代碼片段間的迭代狀態(tài)，毫無疑問，不使用閉包，此代碼將更為復雜。
與原來的技術相比，使用該技術有一個明顯的變化。瀏覽器的長時掛起被4個視覺化的頁面更新替代。雖然瀏覽器嘗試著盡可能快得去執(zhí)行這些代碼片段，它也在計時器的每一步操作之后渲染DOM變化（就好像大量的更新）。大多數(shù)情況下，用戶覺察不到此種類型的更新，但記住它們曾經(jīng)發(fā)生過很重要。
有一種情況會使該技術能專門為我服務－－我構建的計算大學生日程排列的應用程序。起初，該應用程序是典型的CGI（客戶與服務器交流，服務器計算出日程表之后將其返回）。但我對它作了改變，講所有的日程計算放到客戶端，這是日程計算的視圖：
這些計算的代價相當昂貴（需要遍歷數(shù)以千計的排列以找到正確的答案）。將日程計算分割成實實在在的單元使這一問題得到了解決（用已經(jīng)完成的那部分更新用戶界面）。最后，用戶提交的是快速、反應靈敏、可用性較高的用戶界面。
如此有用的技術常常令人驚奇。你會發(fā)現(xiàn)它經(jīng)常被用于長時運行的程序之中，就像測試箱（我們在這章末尾討論它）。更為重要的是，這種技術向我們顯示了解決瀏覽器環(huán)境的限制是多么的輕而易舉，同時也為用戶提供了豐富的經(jīng)驗。
出處：
責任編輯：bluehearts
上一頁 下一頁 中央計時器控件
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 昂貴計算的處理
第 2 頁 
