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