您的位置:首页 > 其它

AJAX开发的性能冲击:使用AJAX提高WEB应用的带宽使用率

2006-01-26 14:02 936 查看
AJAX开发的性能冲击:使用AJAX提高WEB应用的带宽使用率
作者:Christopher L Merrill
ris@webperformanceinc.com
©2006 Web Performance, Inc
January 15, 2006
v1.0

简介
作为一个注重效益的公司,我们永远对一种新的开发技术在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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: