JS性能优化

自己查看博客、书籍和自己平时写JS代码时总结的关于js代码性能优化的知识点。

• 避免全局查找，尽量使用局部变量
  在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些。

function search() {        // 使用当前页面地址和主机域名        alert(window.location.href + window.location.host);}// 比较好的方法：先用一个简单变量保存起来function search() {       var location = window.location;       alert(location.href + location.host);}

• 遍历数组，应先缓存数组长度（将数组长度放入局部变量中），避免多次查询
  我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，尽量先把这个长度存下来，减少查询次数。

• 变量名方法名尽量在不影响语意的情况下简单。（如：ArrLen代替ArrayLength）

• 如果可以使用自增、自减表达式，尽量使用其来代替正常表达式，如：x++代替x=x+1，x+=1代替x=x+1。

• 如果要连接多个字符串，那就应该少用+=。（如：s+=a+b+c; 代替 s+=a;s+=b;s+=c;）
  如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存，使用JavaScript数组来收集，最后使用join方法连接起来。
  如：

var buf = [];    for (var i = 0; i < 100; i++) {    buf.push(i.toString());}var all = buf.join('');

• 条件分支
  将条件分支，按可能性顺序从高到低排列：可以减少解释器对条件的探测次数 在同一条件子的多（>2）条件分支时，使用switch优于if：switch分支选择的效率高于if，在IE下尤为明显。4分支的测试，IE下switch的执行时间约为if的一半。 使用三目运算符替代条件分支：

if (a > b) {num = a;} else {num = b;}//可以替换为：num = a > b ? a : b;

• JS的for(;;)、while()、for(in)循环
  其中for(in)的效率最差，因为它需要查询Hash键，所以应尽量少用for(in)循环。for(;;)和while()的性能相差不大，但推荐使用for(;;)。

• 定时器（如果是循环计时，使用setInterval，不要使用setTimeout）
  因为setTimeout每一次都会初始化一个定时器，而setInterval只会在开始的时候初始化一个定时器。

• 不要给setTimeout或者setInterval传递字符串参数

var num = 0;setTimeout('num++', 10);//可以替换为：var num = 0;function addNum() {    num++;}setTimeout(addNum, 10);

• 数字转为字符串
  最好使用”+1”来将数字转换成字符串，这个效率是最高的。
  性能上：(” +) > String() > .toString() > new String()

• 浮点数转换成整型
  parseInt()是用来将字符串转换成数字，而不是浮点数和整型之间的转换，应该使用Math.floor()或Math.round()。

• 缩短否定检测

if (oTest != '#ff0000') {//do something}if (oTest != null) {//do something}if (oTest != false) {//do something}//虽然这些都正确，但用逻辑非操作符来操作也有同样的效果：if (!oTest) {//do something}

• 迭代器（如var name = values[i]; i++; 可以写为var name = values[i++]）

• 使用直接量

 var aTest = new Array(); //替换为 var aTest = []; var aTest = new Object; //替换为 var aTest = {}; var reg = new RegExp(); //替换为 var reg = /../; //如果要创建具有一些特性的一般对象，也可以使用字面量，如下： var oFruit = new O; oFruit.color = 'red'; oFruit.name = 'apple'; //前面的代码可用对象字面量来改写成这样： var oFruit = { color: 'red', name: 'apple' };

• 避免使用with语句
  with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链的长度。

with (a.b.c.d) {        property1 = 1;        property2 = 2;}//可以替换为：var obj = a.b.c.d;obj.property1 = 1;obj.property2 = 2;

• 避免使用eval
  每次使用eval需要消耗大量时间，这时候使用JS所支持的闭包可以实现函数模板。

• 使用常量
  重复值:任何在多处用到的值都应该抽取为一个常量。
  用户界面字符串:任何用于显示给用户的字符串，都应该抽取出来以方便国际化 。
  URLs:在Web应用中，资源位置很容易变更，所以推荐用一个公共地方存放所有的URL。
  任意可能会更改的值:每当你用到字面量值的时候，你都要问一下自己这个值在未来是不是会变化，如果答案是“是”，那么这个值就应该被提取出来作为一个常量。

• 避免与null进行比较
  由于JavaScript是弱类型的，所以它不会做任何的自动类型检查，所以如果看到与null进行比较的代码，则：
  如果值应为一个引用类型，使用instanceof操作符检查其构造函数；如果值应为一个基本类型，作用typeof检查其类型；如果是希望对象包含某个特定的方法名，则使用typeof操作符确保指定名字的方法存在于对象上。

• 尊重对象所有权
  不要为实例或原型添加属性；
  不要为实例或者原型添加方法；
  不要重定义已经存在的方法；
  不要重复定义其它团队成员已经实现的方法，永远不要修改不是由你所有的对象。
  你可以通过以下方式为对象创建新的功能:
  创建包含所需功能的新对象，并用它与相关对象进行交互；
  创建自定义类型，继承需要进行修改的类型，然后可以为自定义类型添加额外功能；

• 解耦HTML/JavaScript
  保持层次的分离，这样排错时就会效率高一点，所以我们应确保HTML呈现应该尽可能与JavaScript保持分离。

• 解耦CSS/JavaScript
  显示问题的唯一来源应该是CSS，行为问题的唯一来源应该是JavaScript，层次之间保持松散耦合才可以让你的应用程序更加易于维护，所以像以下的代码element.style.color=”red”尽量改为element.className=”edit”，而且不要在css中通过表达式嵌入JavaScript。

• 解耦应用程序/事件处理程序
  将应用逻辑和事件处理程序相分离：一个事件处理程序应该从事件对象中提取，并将这些信息传送给处理应用逻辑的某个方法中。这样做的好处首先可以让你更容易更改触发特定过程的事件，其次可以在不附加事件的情况下测试代码，使其更易创建单元测试。

• || 和 && 布尔运算符

function eventHandler(e) {    if (!e) {        e = window.event;    }}//可以替换为：function eventHandler(e) {    e = e || window.event;}if (myobj) {    doSomething(myobj);}//可以替换为：myobj && doSomething(myobj);