JavaScript性能优化实战：DOM操作与对象引用技巧

JavaScript性能优化概述

近期阅读《高性能JavaScript》后，笔者对JS性能优化有了新见解，欢迎交流指正。

提及JavaScript，必然涉及文档对象模型（DOM）。DOM是作用于XML和HTML文档的程序接口（API），驻留在浏览器中，主要用于与HTML文档交互。它同样用于Web程序中获取XML文档，并通过DOM API访问文档数据。尽管DOM是与语言无关的API，但在浏览器中其接口由JavaScript实现。客户端脚本编程大多与底层文档打交道，因此DOM成为当前JavaScript编程的关键组成部分。

浏览器通常将DOM与JavaScript独立实现。例如在IE中，JavaScript实现名为Jscript，位于jscript.dll文件中；DOM实现则存在于另一个库mshtml.dll（内部称为Trident）中。这种分离允许其他技术如VBScript共享使用DOM及Trident提供的渲染函数。Safari中DOM和渲染使用Webkit中的WebCode实现，JavaScript部分由独立的JavaScript引擎（最新版本名为SquirrelFish）实现。Google Chrome同样使用WebKit中的WebCore库渲染页面，但JavaScript引擎为自主研发的V8。Firefox的JavaScript引擎名为SpiderMonkey（最新版名为TraceMonkey），与名为Gecko的渲染引擎相互独立。

DOM与JavaScript引擎的交互机制

可将DOM与JavaScript（此处指ECMAScript，JavaScript使用的ECMAScript版本为ECMAScript-262）想象为两座岛屿，二者通过一座收费桥梁连接。ECMAScript每次访问DOM都需途经此桥并缴纳“过桥费”。访问DOM次数越多，费用越高。因此，减少访问次数即能降低开销。

减少DOM访问：超载运输策略

一、超载运输

鉴于“过桥费”高昂，应尽可能将多次DOM访问整合为一次。例如最简单的场景：

function innerHTMLLoop(){
   for(var count = 0;count < 15000 ;count++){
      document.getElementById('here').innerHTML +='a';
  } 
}

此函数循环修改页面元素内容。代码存在循环迭代，该元素被访问两次：一次读取innerHTML属性值，另一次重写它（意味着每次循环都必须支付“过桥费”）。

为减少开销，可采用更高效的方法，例如：

function innerHTMLLoop2(){
   var content = ' ';
   for(var count = 0;count < 15000 ;count++){
      content +='a';
  } 
  document.getElementById('here').innerHTML +=content;
}

这样只需支付一次“过桥费”即可实现相同功能。运行速度在不同浏览器中均有大幅提升，例如在IE6中，使用innerHTMLLoop2()比使用innerHTMLLoop()快155倍。（现实中许多卡车超载也是为了节省这笔费用，一次性多赚点。但需量力而行，程序同理，均衡存乎万物之间。）

优化对象成员引用：触手可及

二、触手可及

即便使用优化后的JavaScript引擎的新型浏览器，对象成员引用仍存在性能问题。对象在原型链中存在的层级越深，查找速度越慢，例如不太常见的写法：window.location.href。每次遇到点操作符，嵌套成员会导致JavaScript引擎搜索所有对象成员。对象成员嵌套越深，读取速度越慢。执行location.href总是比window.location.href快，后者也比window.location.href.toString()快。若这些属性不是对象的实例属性，成员解析还需搜索原型链，这将耗费更多时间。

由于此类性能问题均与对象成员相关，应尽可能避免使用它们。更准确地说，应仅在必要时使用对象成员。例如，在同一函数中无需多次读取同一对象成员。例如：

function hasEitherClass(element,className1,className2){
   return element.className == className1 || element.className == className2; 
}

上述代码中，element.className被读取了2次。这意味着在该函数语句中，2次成员查找均通过读取属性值完成，因此有必要在第一次查找到值后将其存储在局部变量中，因为局部变量的读取速度要快很多。例如：

function hasEitherClass(element,className1,className2){
   var currentClassName = element.className;
   return currentClassName == className1 || currentClassName == className2; 
}

上述将element.className赋值给currentClassName局部变量，避免了多次查找带来的性能开销。（若多次需要全局对象成员，则将其赋值在最易获取的位置，以减少搜索和查找时间。）

客户端JS性能优化技巧总结

总结

虽有许多内容待讲，但性能优化方式繁多，日后若有更好见解将再行补充。优化正如人找方法以最小力量做最大事情，通俗而言即“懒”，我们让程序也变懒。

以下列举一些关于客户端JS性能的优化小技巧：

1.[顶]关于JS的循环，循环是常用的流程控制。JS提供三种循环：for(;;)、while()、for(in)。在这三种循环中，for(in)效率最差，因其需查询Hash键，故应少用for(in)循环，for(;;)、while()循环性能基本持平。当然，推荐使用for循环，若循环变量递增或递减，不要单独对循环变量赋值，而应使用嵌套的++或--运算符。

2.若需遍历数组，应先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。

3.局部变量的访问速度比全局变量更快，因为全局变量实为window对象的成员，而局部变量置于函数栈中。

4.尽量少使用eval，每次使用eval需消耗大量时间，此时可使用JS支持的闭包实现函数模板。

5.尽量避免对象嵌套查询，对于obj1.obj2.obj3.obj4语句，需进行至少3次查询操作：先检查obj1中是否包含obj2，再检查obj2中是否包含obj3，然后检查obj3中是否包含obj4……这并非好策略。应尽量利用局部变量，将obj4以局部变量保存，从而避免嵌套查询。

6.使用运算符时，尽量使用+=、-=、*=、/=等运算符号，而非直接进行赋值运算。

7.[顶]当需将数字转换成字符时，采用如下方式："" + 1。从性能角度看，将数字转换成字符时，有如下公式：("" +) > String() > .toString() > new String()。String()属于内部函数，故速度很快。而.toString()需查询原型中的函数，速度稍逊，new String()需重新创建字符串对象，速度最慢。

8.[顶]当需将浮点数转换成整型时，应使用Math.floor()或Math.round()，而非parseInt()，该方法用于将字符串转换成数字。且Math是内部对象，故Math.floor()并无多少查询方法和调用时间，速度最快。

9.尽量使用JSON格式创建对象，而非var obj=new Object()方法。因前者是直接复制，后者需调用构造器，故前者性能更优。

10.当需使用数组时，也尽量使用JSON格式语法，即直接使用如下语法定义数组：[parrm,param,param...]，而非采用new Array(parrm,param,param...)语法。因使用JSON格式语法由引擎直接解释，而后者需调用Array构造器。

11.[顶]对字符串进行循环操作（如替换、查找）时，使用正则表达式。因JS循环速度较慢，而正则表达式操作由C编写的API实现，性能较好。

最后有一个基本原则：对于大的JS对象，因创建时时间和空间开销较大，故应尽量考虑采用缓存。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。