提升 web 应用程序的性能（一）
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”); }
字符串函数
JavaScript 中最不可取的函数是字符串连接。我通常使用 + 号来实现连接。清单 4 显示了一个此类样例。
清单 4. 字符串连接
var txt = “hello” + “ ” + “world”;
var txt = “hello” + “ ” + “world”;
这条语句创建了几个包含连接结果的中间字符串。这样在后台连续创建和销毁字符串导致极低的字符串连接性能。早期的浏览器对这样的操作没有优化。我们建议您创建一个 StringBuffer 类来实现，如 清单 5 所示。
清单 5. StringBuffer 对象
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(“”); }
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 所示。
清单 6. 创建新字符串对象的例子
var str = new String(“hello”);
var str = new String(“hello”);
StringObject.indexOf 比 StringObject.match 快。当搜索简单字符串匹配时，尽可能用 indexOf 而不用正则表达式匹配。
尽量避免在长字符串中匹配（10KB 及以上），除非您别无选择。如果您确定只在字符串某一特定部分匹配，用子串而不是整个字符串比较。
DOM 性能
本章简要介绍了一些可进行调整以提升 DOM 性能的内容。
本章简要介绍了一些可进行调整以提升 DOM 性能的内容。
重绘（Repaint）
当之前不可见的内容变得可见，DOM 就会重绘，反过来也一样。重绘也称为重画。此行为不会改变文档布局。不改变元素尺寸、形状或位置，只改变外观也会触发重绘。
例如，给元素添加边框或改变背景色就会触发重绘。重绘的性能代价很大；它需要引擎搜索所有元素以确定哪些可见，哪些必须显示。
当之前不可见的内容变得可见，DOM 就会重绘，反过来也一样。重绘也称为重画。此行为不会改变文档布局。不改变元素尺寸、形状或位置，只改变外观也会触发重绘。
例如，给元素添加边框或改变背景色就会触发重绘。重绘的性能代价很大；它需要引擎搜索所有元素以确定哪些可见，哪些必须显示。
回流（Reflow）
回流是比重绘更显著的改变。在回流中：
- 要操作 DOM 树。
- 影响布局的样式会改变。
- 元素的 className 属性会改变。
- 浏览器窗口尺寸改变。
引擎将会对相关元素回流，以确定各部分显示在哪。子元素也会被回流以反映父元素的新布局。DOM 中元素后面的元素也会被回流，以计算新布局，因为它们可能在初始回流时被移动了。祖先元素也会因子孙元素大小变化而被回流。最后，所有内容都被重绘。
每次向文档添加一个元素，浏览器都要回流页面来计算所有内容如何定位、如何呈现。添加的东西越多，回流次数越多。如果能减少单独添加元素的次数，浏览器回流次数就更少，运行也更快。
CSS 性能
将 Cascading Style Sheets (CSS) 放在顶端。如果样式表放在底部，将最后加载。之前几秒钟，页面都是空白，浏览器等待样式表加载，然后页面上其他东西才能呈现 — 甚至是静态文本。
在 Internet Explorer 中，@import 与在底部使用 <link> 效果一样。我们建议您不要使用。
将 Cascading Style Sheets (CSS) 放在顶端。如果样式表放在底部，将最后加载。之前几秒钟，页面都是空白，浏览器等待样式表加载，然后页面上其他东西才能呈现 — 甚至是静态文本。
在 Internet Explorer 中，@import 与在底部使用 <link> 效果一样。我们建议您不要使用。
缩写属性
使用缩写属性在一个声明中一次设置几个属性，而不是每个属性用一个声明。使用缩写属性，可以减小文件大小，降低维护量。
例如，可以设置背景、边框、边框颜色、边框样式、边框侧（顶部边框、右侧边框、底部边框、左侧边框）、边框宽度、字体、页边距、轮廓、填充属性。
使用缩写属性在一个声明中一次设置几个属性，而不是每个属性用一个声明。使用缩写属性，可以减小文件大小，降低维护量。
例如，可以设置背景、边框、边框颜色、边框样式、边框侧（顶部边框、右侧边框、底部边框、左侧边框）、边框宽度、字体、页边距、轮廓、填充属性。
CSS 选择器
CSS 选择器通过从右到左 移动来匹配。清单 7 所示，浏览器必须遍历页面中每个锚元素以确定它的父元素 ID 是否是 aElement。
CSS 选择器通过从右到左 移动来匹配。清单 7 所示，浏览器必须遍历页面中每个锚元素以确定它的父元素 ID 是否是 aElement。
清单 7. 选择器正从右到左匹配
#aElement > a{
font-size: 18px;
}
如果从代码中移除 > ，如 清单 8 所示，性能更糟。浏览器要检查整个文档中的所有锚。这样就不是只检查锚的父元素，而是顺着文档树向上查找 ID 为 aElement 的祖先元素。如果正在检查的元素不是aElement 的子孙，浏览器就要沿着祖先元素的树查找，直到文档根部。
#aElement > a{
font-size: 18px;
}
如果从代码中移除 > ，如 清单 8 所示，性能更糟。浏览器要检查整个文档中的所有锚。这样就不是只检查锚的父元素，而是顺着文档树向上查找 ID 为 aElement 的祖先元素。如果正在检查的元素不是aElement 的子孙，浏览器就要沿着祖先元素的树查找，直到文档根部。
清单 8. 如果没有 >，性能更糟
#aElement a{ font-size: 18px; }
#aElement a{ font-size: 18px; }