这几天分享一下我看《高性能 JavaScript》的学习笔记，希望能对大家有所帮助。

在本章中，主要讲了一些 JavaScript 编程中可以提高性能的知识点。

避免双重求值

当使用 eval()、Function() 构造器、setTimeout()、setInterval() 方法执行字符串形式的 JavaScript 代码时，会造成双重求值，严重影响性能。

当然，我们应该尽量避免使用字符串形式来执行 JavaScript 代码。

使用 Object/Array 直接量创建

// good
var obj = { name: 'violetjack' }
var arr = [ 1, 2, 3 ]

// bad
var obj = new Object();
var arr = new Array()

避免重复工作

• 别做无关紧要的事
• 别重复做已经做过的工作

下面的代码是一段添加 DOM 绑定事件的行为，并且兼容了 IE 的绑定事件写法。但是这段代码有个问题就是每次运行 addHandler 方法就要判断一次当前浏览器环境，这无疑是一个重复工作。

function addHandler(target, eventType, handler) {
  if (target.addEventListener) {
    target.addEventListener(eventType, handler, false)
  } else {
    target.attachEvent("on" + eventType, handler)
  }
}

下面是两种解决方案：

延时加载

适用于函数不会立即调用的情况。

function addHandler(target, eventType, handler) {
  if (target.addEventListener) {
    addHandler = function (target, eventType, handler) {
      target.addEventListener(eventType, handler, false)
    }
  } else {
    addHandler = function (target, eventType, handler) {
      target.attachEvent("on" + eventType, handler)
    }
  }

  addHandler(target, eventType, handler)
}

条件预加载

适用于函数立即被调用到，而且整个页面中频繁出现的情况。

var addHandler = document.body.addEventListener ?
  function (target, eventType, handler) {
    target.addEventListener(eventType, handler, false)
  } : function (target, eventType, handler) {
    target.attachEvent("on" + eventType, handler)
  }

使用位操作

JavaScript 中的位操作有：

• 按位与
• 按位或
• 按位异或
• 按位取反

按位操作虽然平时用的不多，但是在算法和数据处理中是非常有用的工具，而且它的性能非常高。大家可以试着用用。

使用原生方法

在 JavaScript 中原生方法是已经编译过的现有方法，它们的效率高于编写的代码。所以如果能够使用原生方法尽量不要自己写。类似的原生方法有复杂数学运算、DOM 操作等。

最后

这里提出的都是一些编码实战中的优化小 tips，但想必对于了解前端优化和写出更高校的代码还是有所帮助的。