提升 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; }