Ajax用戶端響應速度分析

理論上AJAX技術在很大的程度上可以減少使用者操作的等待時間，同時節約網路上的資料流量。而然，實際情況卻並不總是這樣。使用者時常會抱怨用了AJAX的系統響應速度反而降低了。
導致這種結果的根本原因並不在AJAX, 很多時候系統響應速度的降低都是由不夠合理的介面設計和不夠高效的編程習慣造成的。下面我們就來分析幾個AJAX開發過程中需要時刻注意的環節。
合理的使用用戶端編程和遠端程序呼叫
用戶端的編程主要都是基於JavaScript的。而JavaScript是一種解釋型的程式設計語言，它的運行效率相對於Java等都要稍遜一籌。同時JavaScript又是運行在瀏覽器這樣一個嚴格受限的環境當中。因此開發人員對於哪些邏輯可以在用戶端執行應該有一個清醒的認識。
在實際的應用中究竟應該怎樣使用用戶端編程，這依賴於開發人員的經驗判斷。這裡很多問題是只可意會的。由於篇幅有限，在這裡我們大致歸納出下面這幾個注意事項：
儘可能避免頻繁的使用遠端程序呼叫，例如避免在迴圈體中使用遠端程序呼叫。
如果可能的話儘可能使用AJAX方式的遠端程序呼叫（非同步方式的遠端程序呼叫）。
避免將重量級的資料操作放置在用戶端。例如：大批量的資料複製操作、需要通過大量的資料遍曆完成的計算等。
改進對DOM對象的操作方式。
用戶端的編程中，對DOM對象的操作往往是最容易佔用CPU時間的。而對於DOM對象的操作，不同的編程方法之間的效能差異又往往是非常大的。
以下是三段運行結果完全相同的代碼，它們的作用是在網頁中建立一個10x1000的表格。然而它們的運行速度卻有著天壤之別。

/* 測試代碼1 - 耗時: 41秒*/
var table = document.createElement("TABLE");
document.body.appendChild(table);
for(var i = 0; i < 1000; i++){
var row = table.insertRow(-1);
for(var j = 0; j < 10; j++){
var cell = objRow.insertCell(-1);
cell.innerText = "( " + i + " , " + j + " )";
}
}
/* 測試代碼2 - 耗時: 7.6秒 */
var table = document.getElementById("TABLE");
document.body.appendChild(table);
var tbody = document.createElement("TBODY");
table.appendChild(tbody);
for(var i = 0; i < 1000; i++){
var row = document.createElement("TR");
tbody.appendChild(row);
for(var j = 0; j < 10; j++){
var cell = document.createElement("TD");
row.appendChild(cell);
cell.innerText = "( " + i + " , " + j + " )";
}
}
/* 測試代碼3 - 耗時: 1.26秒 */
var tbody = document.createElement("TBODY");
for(var i = 0; i < 1000; i++){
var row = document.createElement("TR");
for(var j = 0; j < 10; j++){
var cell = document.createElement("TD");
cell.innerText = "( " + i + " , " + j + " )";
row.appendChild(cell);
}
tbody.appendChild(row);
}
var table = document.getElementById("TABLE");
table.appendChild(tbody);
document.body.appendChild(table);

這裡的“測試代碼1”和“測試代碼2”之間的差別在於在建立表格單元時使用了不同的API方法。而“測試代碼2”和“測試代碼3” 之間的差別在於處理順序的略微不同。