AJAX 客戶端響應速度提高分析
2024-09-01 08:29:23
供稿：網友
理論上AJAX技術在很大的程度上可以減少用戶操作的等待時間，同時節約網絡上的數據流量。而然，實際情況卻并不總是這樣。用戶時常會抱怨用了AJAX的系統響應速度反而降低了。
筆者從事AJAX方面的研發多年，參與開發了目前國內較為成熟的AJAX平臺-dorado。根據筆者的經驗，導致這種結果的根本原因并不在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");
