提升 web 应用程序的性能(1)

look_w

Rich Internet applications (RIAs) 在 Web 2.0 领域非常流行。为了提供新鲜、别致的用户体验，很多网站用 JavaScript 或 Flash 将复杂的内容从后台服务器搬到前台客户端。如果 数据较少的话，这提供了一个方便、新颖，流畅的用户界面（UI）。如果要将大量内容从服务器转移到客户端并在浏览器呈现，性能将显著下降。挑战是找到瓶颈，确定解决方案。            
在浏览器中调整性能问题比在 Java 应用程序中更难。开发人员在各种浏览器中调试 JavaScript 的方法要少得多。在 Mozilla Firefox 中，可以使用 Firebug 调试 JavaScript，但仍然不能调整很多性能问题，如浏览器呈现消耗时间。为了解决这些问题，有必要开发浏览器插件来监控时间响应，以及确定其他对应解决方案如部分呈现或延时加载。            
学习诊断 web 应用程序中的性能问题，找到客户端内容中的瓶颈，并调整性能。            
JavaScript 和 HTML DOMJavaScript 是用在 Internet 上的最流行的脚本语言。数以万计的 web 页面设计师使用 JavaScript 来改善设计、验证表单、检查浏览器以及创建 cookie。HTML Document Object Model (DOM) 定义了访问和操作 HTML 文档的标准方法。它将 HTML 文档表示成节点树，其中包含元素、属性和文本内容。            
通过使用 HTML DOM，JavaScript 能访问 HTML 文档中所有节点并操作它们。很多主流浏览器都支持 JavaScript 和 HTML DOM，而且很多网站也使用它们。它们使用的性能显著影响到整个 RIAs 的性能。            
JavaScript 性能和函数在 JavaScript 中，当需要某一功能时，使用 函数。尽管有些情形下可以用字符串代替函数，我们还是建议您尽可能使用函数。在 JavaScript 中，函数在使用前会预编译。            
例如，看  中的 eval 方法。            
清单 1. eval 方法用字符串作参数

1 2 3 4 5

function square(input) {   var output;   eval('output=(input * input)');   return output; }

eval 方法计算平方值并输出结果，但性能不好。此例使用字符串 output=(input*input) 作为 eval 方法的参数，无法利用 JavaScript 预编译。                  
显示了一个完成此任务的更好的方法。            
清单 2. 使用函数作参数的 Eval 方法

1 2 3 4 5

function square(input) {   var output;   eval(new function() { output=(input * input)});   return output; }

使用函数代替字符串作参数确保新方法中的代码能被 JavaScript 编译器优化。            
函数作用域JavaScript 函数作用域链中的每个作用域都包含几个变量。理解作用域链很重要，这样才能利用它。 显示的是一个函数作用域样例。            
清单 3. 函数作用域

1 2 3 4 5

function test() {   var localVar = “test”;   test1(this. localVar); var pageName = document.getElementById(“pageName”); }

显示了作用域链结构。            
图 1. 作用域链结构使用局部变量比使用全局变量快得多，因为在作用域链中越远，解析越慢。            
如果代码中有 with 或 try-catch 语句，作用域链会更复杂。 显示的是 try-catch 语句的作用域链。                  
图 2. Try-catch 作用域链结构字符串函数JavaScript 中最不可取的函数是字符串连接。我通常使用 + 号来实现连接。 显示了一个此类样例。            
清单 4. 字符串连接

1	var txt = “hello” + “ ” + “world”;

这条语句创建了几个包含连接结果的中间字符串。这样在后台连续创建和销毁字符串导致极低的字符串连接性能。早期的浏览器对这样的操作没有优化。我们建议您创建一个 StringBuffer 类来实现，如  所示。            
清单 5. StringBuffer 对象

1 2 3 4 5 6 7 8 9 10 11 12

function StringBuffer() { this.buffer = []; } StringBuffer.prototype.append = function append(val) { this.buffer.push(val); return this; } StringBuffer.prototype.toString = function toString () { return this.buffer.join(“”); }

对字符串对象（而非值）定义了所有的属性和方法。当您引用一个字符串值的属性或方法时，ECMAScript 引擎在方法执行前隐式创建一个具有相同值的新字符串对象。此对象只用于特定请求，当下一次使用字符串值的方法时重新创建。            
这种情况下，对那些方法会被调用多次的字符串使用新的语句。            
新字符串对象的例子如  所示。            
清单 6. 创建新字符串对象的例子

1	var str = new String(“hello”);

StringObject.indexOf 比 StringObject.match 快。当搜索简单字符串匹配时，尽可能用 indexOf 而不用正则表达式匹配。            
尽量避免在长字符串中匹配（10KB 及以上），除非您别无选择。如果您确定只在字符串某一特定部分匹配，用子串而不是整个字符串比较。