JavaScript提升性能的常用技巧总结

本文深入探讨了提升JavaScript运行效率的多种实用技巧，旨在为开发者提供可操作的参考方案。

注意作用域

1. 注意作用域

随着作用域链中作用域数量的增加，访问当前作用域以外变量的时间也随之增加。访问全局变量总是比访问局部变量慢，因为需要遍历作用域链。 1). 避免全局查找：在一个函数中会多次用到的全局对象，存储为局部变量总是正确的做法。

应避免使用 with 语句，因为它会创建独立的作用域，从而增加执行代码所在作用域链的长度，导致性能下降。

选择正确的方法

2. 选择正确的方法

性能瓶颈往往源于所选用的算法或实现方法的不当。

1). 避免不必要的属性查找

在计算机科学中，算法复杂度通常使用大O符号表示。最简单的算法是常数级复杂度，即O(1)，其执行时间恒定。随着复杂度增加，算法执行时间也随之增长。常见的JavaScript算法类型包括：

常数级：无论数据量大小，执行时间保持恒定，通常涉及简单值或存储在变量中的值。

对数级：总执行时间与数据量相关，但无需遍历所有值即可完成算法，例如二分查找。

线性级：总执行时间与数据量直接成正比，例如遍历数组中的所有元素。

平方级：总执行时间与数据量相关，每个值至少需处理n次，例如插入排序。

立方级：总执行时间与数据量相关，每个值至少需处理n的平方次。

使用变量和数组访问属性的效率高于直接访问对象属性。因为访问对象属性需要在原型链中搜索同名属性，耗时更长。

原则上，应尽可能降低算法复杂度。通过大量使用局部变量将属性查找替换为值查找，能显著提升效率。此外，若既能通过数字索引访问（如NodeList对象），又能通过命名属性访问，优先使用数字索引方式。

2). 优化循环

a. 采用减值迭代：在许多场景下，从最大值开始递减的循环迭代器比递增方式更高效。 b. 简化终止条件：由于每次循环都会计算终止条件，务必确保其计算速度尽可能快。 c. 简化循环体：循环体执行频率最高，需确保其得到最大程度的优化，将可移出的密集计算移出循环。 d. 使用后测试循环：常用的for和while循环属于前测试循环，而do-while等后测试循环可避免初始终止条件的计算，从而提升速度。

3). 展开循环：当循环次数确定时，消除循环结构并改为多次函数调用往往能带来更快的执行速度，例如著名的Duff装置技术。

4). 避免双重解释

当JavaScript代码试图解析并执行字符串形式的JavaScript代码时，会面临双重解释的性能惩罚。例如：

eval("alert('Hello world!')");
//某些代码求值

修正方案如下：

alert('Hello world');

var sayHi = new Function("alert('Hello world!')");   

另一种修正方式：

var sayHi = function(){
  alert("Hellow world!');
};

setTimeout("alert('Hellow world!')",500);

第三种修正示例：

setTimeout(function)({
   alert('Hellow world!');
},500);

5). 其他方法

优先使用原生方法：只要可行，应直接使用原生方法而非自行用JavaScript重写。原生方法通常由C/C++等编译型语言编写，执行速度远超JavaScript实现。例如，Math对象中提供的复杂数学运算（如正弦、余弦）比纯JavaScript编写的同类方法快得多。

Switch语句效率较高：若存在复杂的if-else逻辑，转换为单个switch语句可获得更快的代码。此外，将case语句按可能性从高到低排序，可进一步优化switch语句的性能。

位运算符效率更高：在进行数学运算时，位运算操作比布尔运算或算术运算更快。选择性使用位运算替代算术运算可大幅提升复杂计算的性能，例如取模、逻辑与和逻辑或操作均可考虑用位运算替换。

最小化语句数

3. 最小化语句数

1). 合并变量声明

例如：

//4个语句---很浪费
var count = 5;
var color = "blue";
var values = [1,2,3];
var now = new Date();

优化后的写法：

var count = 5,
color = "blue", 
values = [1,2,3],
noiw = new Date();

在大多数情况下，这种优化易于实施，且比单独声明每个变量快得多。

2). 插入迭代值

例如：

var name = values[i];
i++;

优化后：

var name = values[i++];

3). 使用数组和对象字面量

例如：

var values = new Array(); 改为 var values = []; var obj = new Object(); 改为 var obj = {};

优化DOM交互

4. 优化DOM交互

1). 最小化现场更新

当访问或修改已显示页面的DOM部分时，即发生现场更新。之所以称为现场更新，是因为浏览器需立即重新计算尺寸以更新用户界面。无论是插入单个字符还是移除整个片段，都会带来性能惩罚，因为浏览器需重新计算无数尺寸以完成更新。

示例：

var list = document.getElementById("myList");
for(var i = 0;i < 10;i++){
  var item = document.createElement("li");
  list.appendChild(item);
  item.appendChild(document.createTextNode("Item "+i));
}

上述操作添加10个项目，共需完成20次现场更新。改进方案如下：

var list = document.getElementById("myList");
var fragment = document.createDocumentFragment();
for(var i = 0; i < 10;i++){
   fragment.appendChild(item);
   item.appendChild(document.createTextNode("Item "+i));
}
list.appendChlid(fragment);

此例中仅发生一次现场更新，即所有项目创建完毕后。文档碎片作为临时占位符存放新创建的项目，随后使用appendChild()将所有项目添加到列表中。需注意，向appendChild()传入文档碎片时，仅碎片的子节点被添加到目标，碎片本身不会被添加。

在需要更新DOM时，建议先使用文档碎片构建DOM结构，再将其添加到现有文档中。

2). 使用innerHTML

创建DOM节点主要有两种方式：使用createElement()、appendChild()等DOM方法，或使用innerHTML。对于小型DOM更改，两种方法效率相近；但对于大型DOM更改，使用innerHTML创建相同DOM结构的速度远快于标准DOM方法。此外，一次性使用innerHTML比多次使用innerHTML效率高出许多。

3). 使用事件代理（简要说明）

4). 注意NodeList

最小化访问NodeList的次数可极大改进脚本性能。

以下情况会返回NodeList对象：

a. 调用getElementsByTagName() b. 获取元素的childNodes属性 c. 获取元素的attributes属性 d. 访问特殊集合，如document.forms、document.images等

了解并合理使用NodeList对象，能显著提升代码执行速度。

前文介绍的函数节流也是重要方面，特别是在多重循环极其消耗性能时，此方法非常有效。

PS：对JavaScript代码进行压缩以减少体积，也是提升性能的有效途径。此处推荐两款实用的压缩工具：

JavaScript压缩/格式化/加密工具： http://tools.jb51.net/code/jscompress

jsmin在线JS压缩工具： http://tools.jb51.net/code/jsmincompress

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。