避免二次评估:
就是在javascript代码中执行另外一段javascript代码 就会有二次评估的代价 多了一次评估是否为正常代码
使用对象和数组直接量:
//create an object
var myObject = new Object();
myObject.name = "Nicholas";
myObject.count = 50;
myObject.flag = true;
myObject.pointer = null;
//create an array
var myArray = new Array();
myArray[0] = "Nicholas";
myArray[1] = 50;
myArray[2] = true;
myArray[3] = null;
但是 下面的直接量赋值更快 占用空间更少
//create an object
var myObject = {
name: "Nicholas",
count: 50,
flag: true,
pointer: null
};
//create an array
var myArray = ["Nicholas", 50, true, null];
不要重复工作:不要做不必要的工作==》重构 和 不要做重复的已经完成的工作
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);
}
}
每个页面加载 都会重复执行这代码
解决方案:
(1)延迟加载:
function addHandler(target, eventType, handler){
//overwrite the existing function
if (target.addEventListener){ //DOM2 Events
addHandler = function(target, eventType, handler){
target.addEventListener(eventType, handler, false);
};
} else { //IE
addHandler = function(target, eventType, handler){
target.attachEvent("on" + eventType, handler);
};
}
//call the new function
addHandler(target, eventType, handler);
}
function removeHandler(target, eventType, handler){
//overwrite the existing function
if (target.removeEventListener){ //DOM2 Events
removeHandler = function(target, eventType, handler){
target.addEventListener(eventType, handler, false);
};
} else { //IE
removeHandler = function(target, eventType, handler){
target.detachEvent("on" + eventType, handler);
};
}
//call the new function
removeHandler(target, eventType, handler);
}
不需要判断使用那种方法附加或分离事件句柄 直到有人调用这函数
第一次调用并决定使用那种方法附加或分离时间句柄 然后原始函数就被包含适当操作的新函数覆盖了 最后调用新函数并将原始参数传给它,以后再调用addHandler或removeHandler时就不会再次检测 因为检测代码已经被新函数覆盖了。
这种适合函数不会在页面上立即被用到的场合。
(2)提前预加载:在脚本加载前提前进行检查 不等待函数调用
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);
};
位操作运算符:速度快
var num1 = 25,
num2 = 3;
alert(num1.toString(2)); //"11001"
alert(num2.toString(2)); // "11"
var result1 = 25 & 3; //1
alert(result.toString(2)); //"1"
//bitwise OR
var result2 = 25 | 3; //27
alert(resul2.toString(2)); //"11011"
//bitwise XOR
var result3 = 25 ^ 3; //26
alert(resul3.toString(2)); //"11000"
//bitwise NOT
var result = ~25; //-26
alert(resul2.toString(2)); //"-11010"
for (var i=0, len=rows.length; i < len; i++){
if (i % 2) {
className = "even";
} else {
className = "odd";
}
//apply class
}
上面的这段循环 和下面的循环 如果循环rows够大 下面的速度快体现出来了
for (var i=0, len=rows.length; i < len; i++){
if (i & 1) {
className = "odd";
} else {
className = "even";
}
//apply class
}
原生方法:
Math对象就是很好一个数学运算的方法比传统javascript的快
jQuery引擎被认为是最快的css查询引擎 但是还是比原生的慢
querySelector() 和 querySelectorAll() 方法对Dom 操作