提升web应用程序的性能- 找出瓶颈，加快客户端内容的速度

简介： 作为 web 用户，我们知道页面加载或刷新的速度对其成功至关重要。本文将帮助您更好地理解影响 web 应用程序性能的因素。学习识别这些问题并且找到客户端内容的瓶颈。探索 JavaScript、DOM、CSS 和 Dojo 小部件的性能问题。将通过一个例子展示使用 YSlow 和 Firebug 适当调整 Dojo 小部件。
本文的标签：  ajax, dhtml_(dynamic_html), ecmascript, javascript, web, 应用程序的性能, 应用集成, 技巧, 提升
概览
Rich Internet applications (RIAs) 在 Web 2.0 领域非常流行。为了提供新鲜、别致的用户体验，很多网站用 JavaScript 或 Flash 将复杂的内容从后台服务器搬到前台客户端。如果 数据较少的话，这提供了一个方便、新颖，流畅的用户界面（UI）。如果要将大量内容从服务器转移到客户端并在浏览器呈现，性能将显著下降。挑战是找到瓶颈，确定解决方案。
在浏览器中调整性能问题比在 Java 应用程序中更难。开发人员在各种浏览器中调试 JavaScript 的方法要少得多。在 Mozilla Firefox 中，可以使用 Firebug 调试 JavaScript，但仍然不能调整很多性能问题，如浏览器呈现消耗时间。为了解决这些问题，有必要开发浏览器插件来监控时间响应，以及确定其他对应解 决方案如部分呈现或延时加载。
学习诊断 web 应用程序中的性能问题，找到客户端内容中的瓶颈，并调整性能。
JavaScript 和 HTML DOM
JavaScript 是用在 Internet 上的最流行的脚本语言。数以万计的 web 页面设计师使用 JavaScript 来改善设计、验证表单、检查浏览器以及创建 cookie。HTML Document Object Model (DOM) 定义了访问和操作 HTML 文档的标准方法。它将 HTML 文档表示成节点树，其中包含元素、属性和文本内容。
通过使用 HTML DOM，JavaScript 能访问 HTML 文档中所有节点并操作它们。很多主流浏览器都支持 JavaScript 和 HTML DOM，而且很多网站也使用它们。它们使用的性能显著影响到整个 RIAs 的性能。
JavaScript 性能和函数
在 JavaScript 中，当需要某一功能时，使用 函数。尽管有些情形下可以用字符串代替函数，我们还是建议您尽可能使用函数。在 JavaScript 中，函数在使用前会预编译。
例如，看 清单 1 中的 eval 方法。
清单 1. eval 方法用字符串作参数
function square(input) {
  var output;
  eval('output=(input * input)');
  return output;
}
eval 方法计算平方值并输出结果，但性能不好。此例使用字符串 output=(input*input) 作为 eval 方法的参数，无法利用 JavaScript 预编译。
清单 2 显示了一个完成此任务的更好的方法。
清单 2. 使用函数作参数的 Eval 方法
function square(input) {
  var output;
  eval(new function() { output=(input * input)});
  return output;
}
使用函数代替字符串作参数确保新方法中的代码能被 JavaScript 编译器优化。
函数作用域
JavaScript 函数作用域链中的每个作用域都包含几个变量。理解作用域链很重要，这样才能利用它。清单 3 显示的是一个函数作用域样例。
清单 3. 函数作用域
function test() {
  var localVar = “test”;
  test1(this. localVar);
var pageName = document.getElementById(“pageName”);
}
图 1 显示了作用域链结构。

图 1. 作用域链结构

使用局部变量比使用全局变量快得多，因为在作用域链中越远，解析越慢。
如果代码中有 with 或 try-catch 语句，作用域链会更复杂。图 2 显示的是 try-catch 语句的作用域链。
图 2. Try-catch 作用域链结构

字符串函数
JavaScript 中最不可取的函数是字符串连接。我通常使用 + 号来实现连接。清单 4 显示了一个此类样例。
清单 4. 字符串连接
var txt = “hello” + “ ” + “world”;
这条语句创建了几个包含连接结果的中间字符串。这样在后台连续创建和销毁字符串导致极低的字符串连接性能。早期的浏览器对这样的操作没有优化。我们建议您创建一个 StringBuffer 类来实现，如 清单 5 所示。
清单 5. StringBuffer 对象
 
function StringBuffer() {
this.buffer = [];
}

StringBuffer.prototype.append = function append(val) {
 this.buffer.push(val);
 return this;
}