高性能建议实践

1、避免双重判断

var num1 = 5,

num2 = 6,

result = eval("num1 + num2"),

sum = new Function("arg1", "arg2", "return arg1 + arg2");

setTimeout("sum = num1 + num2", 100);

setInterval("sum = num1 + num2", 100);

首先上面的代码会像普通代码一样评估求值，但是在执行的时候，字符串里面的代码会引起另外一个评估求值操作。有些javascript引擎优化了，缓存相同的eval()执行结果。

2、使用对象、数组字面量

var myObject = {
name: "Nicholas",
count: 50
};
var myArray = ["Nicholas", 50, true, null];

这样速度是最快的。

3、不要重复工作

上面的函数，每次调用都会做同样的检测，每次检测都需要在对象里查找，事实上检测一次就可以了，避免重复工作的办法有很多，接下来的就是 ↓

4、lazy load function 延迟加载函数

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); //为了第一次调用的时候能够执行，以后调用就直接运行覆盖后的新函数了
}

function removeHandler(target, eventType, handler) {
     if (target.removeEventListener) {
          removeHandler = function(target, eventType, handler) {
               target.addEventListener(eventType, handler, false);
          };
     } else {
          removeHandler = function(target, eventType, handler) {
               target.detachEvent("on" + eventType, handler);
          };
     }

     removeHandler(target, eventType, handler);
}

当然也可以在函数定义的时候就检测而不是第一次运行的时候：

var addHandler = (function (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);
})();

5、有条件地预加载

var addHandler = document.body.addEventListener ? 需要放在前面，在代码解析的时候就提前进行了判断，而不用等待函数调用

function(target, eventType, handler){

target.addEventListener(eventType, handler, false);

function(target, eventType, handler){

target.attachEvent("on" + eventType, handler);

};

var removeHandler = document.body.removeEventListener ?

function(target, eventType, handler){

target.removeEventListener(eventType, handler, false);

function(target, eventType, handler){

target.detachEvent("on" + eventType, handler);

};

6、使用位运算

7、native方法，不管怎么优化你写的的代码，都不会比原生的更快滴。原因是，那些原本就存在浏览器里的原生方法是用更底层的语言编写的（如C++），这些方法本来就被编译成了浏览器的组成部分

高性能 建议 实践

高性能建议实践