採用AJAX提高網站程式的頻寬效能

介紹

作為一個做網頁效能測試的公司，我們一直關注新的開發技術在提高網頁程式效能方面 的影響。我們有不少使用者遇到僅僅是因為他們網頁的大小而影響其效能的問題。簡單說 ——頁面太大了不能在有限的頻寬條件下達到理想的效能。很多情況下，在不同 網頁間包含的基本要素是相同的。例如，頁頭、頁尾、導航條都很少變化，在一些程式中甚 至根本沒有變化。這點啟發我們，如果程式只更新頁面中需要改變的部分，將可以節省可觀 的頻寬。

目標

為了驗證這個理論，我們決定看看是否能讓程式節約至少50％的頻寬。我們選擇了一個 相當簡單的內部資料分析程式。程式由典型的網頁版面構成：中間是變化的內容部分。頁頭 、頁尾和導航條部分都沒有任何變化。我們編輯了程式以便可以通過傳統的頁面重新整理方式和 AJAX方式來訪問它。接下來我們用測試載入器（網頁效能分析器）記錄分析了兩種不同方式網 頁的頻寬利用情況。

結果

實驗的第一個成果是有一點讓我們驚訝。談到AJAX體繫結構，我們本以為選擇一個合適 的AJAX結構應用在我們的程式中會比較費事。在用一些流行的網頁架構做了一些簡單的實驗 並考慮到javascript函數的危險性後，我們決定採用選取的一些簡單的javascrip函數來達 到我們的目標。我們能夠從網上種類繁多的 Javascript/AJAX使用指南中得到我們需要的代 碼段，通過不超過100行javascript代碼，我們把程式修改成利用AJAX的方式。不需要任何 架構結構。

scenario/mode	first-page size	typical page size	total bandwidth
Page-refresh	44k	10k	210k
AJAX	47k	2.5k	81k

總頻寬節約>61%

節約的頻寬從何而來

下面是我們從測試載入器（網頁效能分析器）上抓下的截圖，顯示了傳統和AJAX兩個不同 版本的頁面傳輸資料大小。從下圖可以看到URLs（連結）和大小，AJAX模式程式確實讓首頁 變得更大。在我們的測試中，大約大了3K。這並不奇怪，因為這一頁包含了附加的 javascript程式來驅動AJAX模式。如果選用AJAX架構結構，估計還會大不少。

不過最值得注意的是典型頁面的大小從平均10K左右下降到了平均2.5K左右 ——下降了75％

圖示1：傳統網頁重新整理模式需要的頻寬

圖示2：AJAX模式需要的頻寬