高性能 建议 实践

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、不要重复工作
function addHandler(target, eventType, handler){

if (target.addEventListener){ //DOM2 Events

target.addEventListener(eventType, handler, false);

} else { //IE

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

}

}

function removeHandler(target, eventType, handler){

if (target.removeEventListener){ //DOM2 Events

target.removeEventListener(eventType, handler, false);

} else { //IE

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

}

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

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++），这些方法本来就被编译成了浏览器的组成部分