javascript 性能分析：编程

避免二次评估：

就是在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 操作