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

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模式需要的頻寬

點擊圖片放大瀏覽

　　為了達到節約頻寬，我們對程式做了少量的修改

　　應用模式開關

　　首先我們增加了一個應用模式開關。用網頁程式描述符中用到了一個關聯參數來使程式能詢問到是使用AJAX還是網頁重新整理模式。注意並不是對所有程式都必需的。

　　HTML表單組件變化

　　下面我們編輯HTML代碼的表單（form）組件來改變表單提交機制。例如，下面是編輯前後下拉式功能表（select）組件的開始標籤的代碼：

<SELECT name="type" >

<SELECT name="type" >

　　The SELECT element will now call a javascript function (see below) instead of using the browser to submit the form.

　　修改後下拉式功能表組件將調用javascript函數（看下面）來代替通過瀏覽器提交表單。

　　HTML 程式碼中添加SPAN 標籤包含住 FORM 標籤

　　為了標記HTML頁面中需要用伺服器返回的內容動態更新的部分，我們以將以javascript函數中標記參數來命名SPAN標籤。

<span id="content_area">

[1] [2] 下一頁