AJAX开发的性能冲击：使用AJAX提高WEB应用的带宽使用率
作者：Christopher L Merrill
简介
作为一个注重效益的公司，我们永远对一种新的开发技术在WEB应用上的性能影响感兴趣。我们有很多的用户，这些用户都存在着由于他们的WEB页面的大小引起的性能问题。换句话说，由于现存的带宽限制，那些页面因为很明显太大了，不能够获得理想的性能目标。很多时候，很多页面都由很多公共的内容组成。例如，在整个应用的期间，标题、页脚和导航菜单是很少有变化的。这提醒我们，如果一个页面只更新页面需要更新的那一部分，那么相当大的带宽将会被节省下来。
目标
为了测试上面的推测，我们决定看一看，如果一个应用的带宽被砍掉至少50%，将会出现什么效果。我们选择了一个相当简单的、基于内部网的数据分析系统。这个应用的页面是典型的页面布局：中间部分包含了一个可变内容。在整个应用的操作过程中，标题、页脚和导航菜单是不变的。我们修改了应用，使得它能够以传统的方式（页面刷新）和AJAX的方式被访问。然后，我们使用我们的测量工具（Web Performance Analyzer）来记录和分析每一种应用的带宽使用情况。
结果
这种努力的第一个结果不太让我们吃惊。通过我们对AJAX开发框架的所有讨论，我们估计为我们的应用选择一个恰当的AJAX开发框架将是我们的一个困难时期。经过对一些流行的开发框架的一些简单实践，我们认识到仅仅Javascript是比较危险的，所以我们决定仅仅收集一些Javascript函数来完成我们的任务。我从基于.net的各种各样的javascript/AJAX指南里拉出一些代码片断，使用了不到100行的javascript代码（和对我们系统的一些重构），我们将系统转化为AJAX，而我们没有使用AJAX框架。
第二个结果就和我们的期望相互吻合。我们砍掉了我们应用的61%的带宽。下面的表格显示了两个版本的应用的带宽统计。
|
scenario/mode
|
first-page size
|
typical page size
|
total bandwidth
|
|
Page-refresh
|
44k
|
10k
|
210k
|
|
AJAX
|
47k
|
2.5k
|
81k
|
总的带宽节省率>61%
带宽的节省从何而来
下面的截屏显示了我们使用
测量工具（Web Performance Analyzer）得到的页面/url处理的大小，分为原始的应用（页面刷新模式）和AJAX模式。就像你所看到的如下的url和size一样，AJAX模式应用的确使得应用的首页的带宽变大。在我们的测试中，大约增加了3k的带宽。这点不让人吃惊，因为这个页面包含了传统的javascript代码，这些代码用来驱动AJAX模式。如果我们选择一个AJAX开发框架，可以设想这方面的带宽会增加得更多。
页面刷新模式的带宽需求
AJAX模式的带宽需求
我们如何达到上述目的的
为了获得带宽上的节省，我们必须对应用做一系列的修改。
应用模式切换
首先我们增加了一个应用模式切换开关。在WEB应用描述文件里，我们使用了一个上下文参数，使得应用系统能够决定它是处在AJAX模式还是页面刷新模式。注意：大多数的应用不需要这一步。
HMTL表格的变化
接着，我们将HMTL表格改为form-submission模式。如下所示，是一个改变前和改变后的SELECT的开始标记：
<SELECT name="type" onChange="window.document.theform.submit()">
<SELECT name="type" onChange="submitForm()">
从上面的代码可以看到，SELECT标签使用了javascript函数，而不是浏览器提供表格。
表格周围的HTML SPAN元素
为了标识一段HTML片断，使得这个片断能够被从服务器返回的内容所替代，我们在SPAN元素的内部放置了一个名称标识符，这个标识符能够被我们的javascript代码所识别。
<span id="content_area">
javascript函数
接着，我们亲自写或者引用一些javascript函数来执行AJAX模式个表的提供和更新请求。
首先是被SELECT元素使用（见上面的代码）的submitForm()函数，这个函数是用来取代浏览器表格提供逻辑的。这个动作通过两步来完成：
1、创建一个字符来包含被提交的内容。
2、提供内容到一个指定的url，这个url包含一个当操作完成以后需要执行的回调函数。
submitForm()
|
function submitForm()
{
var content = convertFormDataToPostContent(window.document.theform);
doPost('/office/UsageAnalyzer', content, 'processResult');
}
|
我们看到doPost()的第三个参数：“processResult”。当异步的方法调用完成以后，这个方法将和返回结果一起被调用。
processResult()方法（如下所示）的工作是使用服务器发送的结果更新文档。注意：getElementById()方法的'content_area'参数和我们加到我们的HTML文件的SPAN元素的id一样。
processResult()
|
function processResult(result)
{
document.getElementById('content_area').innerHTML = result;
}
|
通过POST处理提供内容到服务器的工作相当简单。首先创建一个浏览器指定的请求对象，提交内容，最后创建一个处理从服务器返回的结果的回调处理方法。下面的代码是从网络上获得的，很容易从AJAX文章或框架中获得。
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', 'application/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);
}
|
Form-field转化方法访问了页面上所列举的field，并且当form-urlencoded发送时为提交方便把它们编码成适当的格式。同样，以下的代码，我们从网络上取得：
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[i];
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;
}
|
结论
在这样的应用中，在多页面请求的时候，每一个页面的有效部分都包含相同的内容，使用AJAX去仅仅更新页面的相关部分会带来重大的带宽节省。使用了不到100行的javascript代码，我们转化了一个已经存在的WEB应用为AJAX式的页面更新，结果对于相同的应用，我们彻底的减少了（>60%）的带宽需求。
注意到我们的修改是相当的简单，这一点很重要。获得相同的带宽减少对于复杂的应用系统可能不这么简单，但是肯定能做到。然而，当发布超大规模的应用或者有着相当严厉的带宽考虑时，节省10%的带宽就会带来很大的费用节省。
进一步的趋势
使用我们所描述的方法来测试一个更加真实的应用，将原始版本改为AJAX版本将是一个非常有趣的事情。如果你知道这样的一个系统，请和我们联系。
AJAX对服务器CPU的冲击也是一个有趣的研究方向。然而，如果我们的页面没有什么数据查询或者其他的处理工作，那么这个系统则不是我们的测试所需要的系统。
如果您对我们的后续版本有什么要求，请到论坛上告诉我们。
反馈和回复
一个在线的forum被用来讨论这个报告的细节、结果和价值。
版本历史
v1.0 - 1st public release (15 jan 06)
原文链接
http://webperformanceinc.com/library/reports/AjaxBandwidth/index.html
发表于 @ 2006年01月26日 14:02:00|评论(loading...)|编辑