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

最新推荐文章于 2021-06-04 19:06:37 发布

hivon

最新推荐文章于 2021-06-04 19:06:37 发布

阅读量4.9k

点赞数

分类专栏： AJAX技术文章标签： ajax web javascript performance xmlhttprequest function

AJAX技术专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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标签使用了javascript函数，而不是浏览器提供表格。

表格周围的 HTML SPAN元素

为了标识一段 HTML片断，使得这个片断能够被从服务器返回的内容所替代，我们在SPAN元素的内部放置了一个名称标识符，这个标识符能够被我们的javascript代码所识别。

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()