日期:2014-05-16  浏览次数:20300 次

[转载]高效 JavaScript

传统上,网页中不会有大量的脚本,至少脚本很少会影响网页的性能。但随着网页越来越像 Web 应用程序,脚本的效率对网页性能影响越来越大。而且使用 Web 技术开发的应用程序现在越来越多,因此提高脚本的性能变得很重要。

对 于桌面应用程序,通常使用编译器将源代码转换为二进制程序。编译器可以花费大量时间优化最终二进制程序的效率。Web 应用程序则不同。因为 Web 应用程序需要运行在不同的浏览器、平台和架构中,不可能事先完全编译。浏览器在获得脚本后要执行解释和编译工作。用户要求不仅要求网页能快速的载入,而且 要求最终 Web 应用程序执行的效果要和桌面应用程序的一样流畅。Web 应用程序应能运行在多种设备上,从普通的桌面电脑到手机。

浏览 器并不很擅长此项工作。虽然 Opera 有着当前最快的脚本引擎,但浏览器有不可避免的局限性,这时就需要 Web 开发者的帮助。Web 开发者提高 Web 应用程序的性能的方法很多而且也很简单,如只需要将一种循环变成另一种、将组合样式分解成三个或者只添加实际需要的脚本。

本文从 ECMAScript/javascript , DOM, 和页面载入方面分别介绍几种简单的能提高 Web 应用程序性能的方法。

目录

ECMAScript

  1. 避免使用 evalFunction 构造函数
    1. 重写 eval
    2. 如果你需要函数,那就用函数
  2. 避免使用 with
  3. 不要在影响性能的关键函数中使用 try-catch-finally
  4. 分隔 evalwith
  5. 避免使用全局变量
  6. 注意隐式对象转换
  7. 在关键函数中避免 for-in
  8. 优化 string 合并
  9. 基本运算符比函数调用更快
  10. setTimeout()setInterval() 传送函数名,而不要传送字符串

DOM

  1. 重绘和 reflow
    1. 减少 reflow 次数
    2. 最小化 reflow 影响
  2. 修改 DOM 树
  3. 修改不可见元素
  4. 测量大小
  5. 一次修改多个样式值
  6. 用流畅性换取速度
  7. 避免搜索大量节点
  8. 使用 XPath 提高速度
  9. 避免在遍历 DOM 时修改 DOM
  10. 使用变量保存 DOM 值

页面载入

  1. 避免保存来自其他文档的引用
  2. 快速历史浏览
  3. 使用 XMLHttpRequest
  4. 动态创建 SCRIPT 元素
  5. location.replace() 控制历史项

ECMAScript

避免使用 evalFunction 构造函数

每次 eval Function 构造函数作用于字符串表示的源代码时,脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源 的操作 —— 通常比简单的函数调用慢100倍以上。

eval 函数效率特别低,由于事先无法知晓传给 eval 的字符串中的内容,eval 在其上下文中解释要处理的代码,也就是说编译器无法优化上下文,因此只能有浏览器在运行时解释代码。这对性能影响很大。

Function 构造函数比 eval 略好,因为使用此代码不会影响周围代码;但其速度仍很慢。

重写 eval

eval 不仅效率低下,而且绝大部分情况下完全没有使用的必要。很多情况下使用 eval 是因为信息以字符串形式提供,开发者误认为只有 eval 能使用此信息。下例是一个典型的错误:

1 function getProperty(oString) {
2 var oReference;
3 eval( 'oReference = test.prop.' +oString);
4 return oReference;
5 }

下面的代码执行完全相同的函数,但没有使用 eval

1 function getProperty(oString) {
2 return test.prop[oString];
3 }

在 Opera 9, Firefox, 和 Internet Explorer 中后者比前者快95%,在 Safari 中快85%。(注意此比较中不含函数本身调用时间。)

如果你