作者: itzealot 發(fā)表日期: 2006-02-17 11:05 文章屬性: 原創(chuàng )
復制鏈接介紹
作為一個(gè)做網(wǎng)頁(yè)性能測試的公司，我們一直關(guān)注新的開(kāi)發(fā)技術(shù)在提高網(wǎng)頁(yè)程序性能方面的影響。我們有不少用戶(hù)遇到僅僅是因為他們網(wǎng)頁(yè)的大小而影響其性能的問(wèn)題。簡(jiǎn)單說(shuō)——頁(yè)面太大了不能在有限的帶寬條件下達到理想的性能。很多情況下，在不同網(wǎng)頁(yè)間包含的基本要素是相同的。例如，頁(yè)頭、頁(yè)尾、導航條都很少變化，在一些程序中甚至根本沒(méi)有變化。這點(diǎn)啟發(fā)我們，如果程序只更新頁(yè)面中需要改變的部分，將可以節省可觀(guān)的帶寬。
目標
為了驗證這個(gè)理論，我們決定看看是否能讓程序節約至少50％的帶寬。我們選擇了一個(gè)相當簡(jiǎn)單的內部數據分析程序。程序由典型的網(wǎng)頁(yè)版面構成：中間是變化的內容部分。頁(yè)頭、頁(yè)尾和導航條部分都沒(méi)有任何變化。我們編輯了程序以便可以通過(guò)傳統的頁(yè)面刷新方式和AJAX方式來(lái)訪(fǎng)問(wèn)它。接下來(lái)我們用測試工具（網(wǎng)頁(yè)性能分析器）記錄分析了兩種不同方式網(wǎng)頁(yè)的帶寬利用情況。
結果
實(shí)驗的第一個(gè)成果是有一點(diǎn)讓我們驚訝。談到AJAX體系結構，我們本以為選擇一個(gè)合適的AJAX結構應用在我們的程序中會(huì )比較費事。在用一些流行的網(wǎng)頁(yè)架構做了一些簡(jiǎn)單的實(shí)驗并考慮到j(luò )avascript函數的危險性后，我們決定采用選取的一些簡(jiǎn)單的javascrip函數來(lái)達到我們的目標。我們能夠從網(wǎng)上種類(lèi)繁多的 Javascript/AJAX使用指南中得到我們需要的代碼段，通過(guò)不超過(guò)100行javascript代碼，我們把程序修改成利用AJAX的方式。不需要任何框架結構。
scenario/mode
first-page size
typical page size
total bandwidth
Page-refresh
44k
10k
210k
AJAX
47k
2.5k
81k
總帶寬節約>61%
節約的帶寬從何而來(lái)
下面是我們從測試工具（網(wǎng)頁(yè)性能分析器）上抓下的截圖，顯示了傳統和AJAX兩個(gè)不同版本的頁(yè)面傳輸數據大小。從下圖可以看到URLs（鏈接）和大小，AJAX模式程序確實(shí)讓首頁(yè)變得更大。在我們的測試中，大約大了3K。這并不奇怪，因為這一頁(yè)包含了附加的javascript程序來(lái)驅動(dòng)AJAX模式。如果選用AJAX框架結構，估計還會(huì )大不少。
不過(guò)最值得注意的是典型頁(yè)面的大小從平均10K左右下降到了平均2.5K左右——下降了75％
圖示1：傳統網(wǎng)頁(yè)刷新模式需要的帶寬
(
點(diǎn)擊可放大)
圖示2：AJAX模式需要的帶寬
(
點(diǎn)擊可放大)
怎么做到的
為了達到節約帶寬，我們對程序做了少量的修改
應用模式開(kāi)關(guān)
首先我們增加了一個(gè)應用模式開(kāi)關(guān)。用網(wǎng)頁(yè)程序描述符中用到了一個(gè)關(guān)聯(lián)參數來(lái)使程序能詢(xún)問(wèn)到是使用AJAX還是網(wǎng)頁(yè)刷新模式。注意并不是對所有程序都必需的。
HTML表單組件變化
下面我們編輯HTML代碼的表單（form）組件來(lái)改變表單提交機制。例如，下面是編輯前后下拉菜單（select）組件的開(kāi)始標簽的代碼：
<SELECT name="type" onChange="window.document.theform.submit()">
<SELECT name="type" onChange="submitForm()">
The SELECT element will now call a javascript function (see below) instead of using the browser to submit the form.
修改后下拉菜單組件將調用javascript函數（看下面）來(lái)代替通過(guò)瀏覽器提交表單。
HTML 代碼中添加SPAN 標簽包含住 FORM 標簽
為了標記HTML頁(yè)面中需要用服務(wù)器返回的內容動(dòng)態(tài)更新的部分，我們以將以javascript函數中標記參數來(lái)命名SPAN標簽。
Javascript函數
接下來(lái)我們寫(xiě)一段代碼或者選取javjavascript函數來(lái)完成AJAX模式表單提交和頁(yè)面刷新。
1． 新建一個(gè)包含提交內容的字符串。
2． 提交內容到特定的URL，完成后調用回復響應方法。
submitForm()
function submitForm()
{
var content = convertFormDataToPostContent(window.document.theform);
doPost(‘/office/UsageAnalyzer‘, content, ‘processResult‘);
}
注意doPost()方法中的第三個(gè)參數：‘processResult‘。這是一個(gè)回復響應的“方法”。當異步方法完成后，這個(gè)方法將會(huì )調用結果返回。
processResult()方法（下面會(huì )提到）的任務(wù)是用提交的內容來(lái)更新文檔。注意getElementById() 方法中的‘content_area‘參數同加入HTML的SPAN標簽中的ID參數是一樣的。
processResult()
function processResult(result)
{
document.getElementById(‘content_area‘).innerHTML = result;
}
將發(fā)送的內容提交到服務(wù)器的工作相對來(lái)說(shuō)比較簡(jiǎn)單。創(chuàng )建一個(gè)瀏覽器request對象，提交內容并創(chuàng )建一個(gè)函數來(lái)響應處理服務(wù)器返回的內容。這段代碼是從網(wǎng)上搜取的，頁(yè)可以很容易的在A(yíng)JAX的文章和框架結構中找到。
doPost()
function doPost(url, content, callback_name)
{
var async_request = false;
// Mozilla/Safari
if (window.XMLHttpRequest)
{
async_request = new XMLHttpRequest();
async_request.overrideMimeType(‘text/xml‘);
}
// IE
else if (window.ActiveXObject)
{
async_request = new ActiveXObject("Microsoft.XMLHTTP");
}
async_request.open(‘POST‘, url, true);
async_request.setRequestHeader(‘Content-Type‘, ‘a(chǎn)pplication/x-www-form-urlencoded‘);
async_request.onreadystatechange = function()
{
if (async_request.readyState == 4)
{
response_content = async_request.responseText;
eval(callback_name + ‘(response_content);‘);
}
}
async_request.send(content);
}
表單項轉換方法將表單中的各項內容串連編碼成一定的格式提交。同樣的，這些代碼可以從相關(guān)的資源和互聯(lián)網(wǎng)上得到。
convertFormDataToPostContent()
function convertFormDataToPostContent(form_name)
{
var content_to_submit = ‘‘;
var form_element;
var last_element_name = ‘‘;
for (i = 0; i < form_name.elements.length; i++)
{
form_element = form_name.elements;
switch (form_element.type)
{
// Text fields, hidden form elements
case ‘text‘:
case ‘hidden‘:
case ‘password‘:
case ‘textarea‘:
case ‘select-one‘:
content_to_submit += form_element.name + ‘=‘
+ escape(form_element.value) + ‘&‘
break;
// Radio buttons
case ‘radio‘:
if (form_element.checked)
{
content_to_submit += form_element.name + ‘=‘
+ escape(form_element.value) + ‘&‘
}
break;
// Checkboxes
case ‘checkbox‘:
if (form_element.checked)
{
// Continuing multiple, same-name checkboxes
if (form_element.name == last_element_name)
{
// Strip of end ampersand if there is one
if (content_to_submit.lastIndexOf(‘&‘) ==
content_to_submit.length - 1)
{
content_to_submit = content_to_submit.substr(
0, content_to_submit.length - 1);
}
// Append value as comma-delimited string
content_to_submit += ‘,‘ + escape(form_element.value);
}
else
{
content_to_submit += form_element.name + ‘=‘
+ escape(form_element.value);
}
content_to_submit += ‘&‘;
last_element_name = form_element.name;
}
break;
}
}
// Remove trailing separator
content_to_submit = content_to_submit.substr(0, content_to_submit.length - 1);
return content_to_submit;
}
結論
在每頁(yè)中都存在特定部分重復的程序中，用AJAX類(lèi)方法只更新網(wǎng)頁(yè)中相關(guān)的部分能夠很好的節省帶寬。通過(guò)不到100行的javascript代碼我們將網(wǎng)頁(yè)程序轉換成采用AJAX的更新方法，大大的降低了(>60%)實(shí)例程序所需要的帶寬利用率。
未來(lái)的方向
測試更多的用我們在這里提到的AJAX方法來(lái)實(shí)現的現實(shí)應用程序會(huì )很有意思。如果你有這樣的程序，請和我們聯(lián)系。
對服務(wù)器CPU資源的影響將會(huì )是有趣的研究。不過(guò)，我們的頁(yè)面中沒(méi)有需要數據庫查詢(xún)或其他進(jìn)程處理工作，所以這個(gè)參考程序不一定是做此類(lèi)測試的最好選擇。
