《高性能javascript》读书笔记：第八章 编程实践
| 避免双重求值 |
在程序中提取一个包含代码的字符串,然后动态执行它的四种方法:eval() ,function构造函数,setTimeout()和setInterval()
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);
当在js代码中执行另一段js代码时,会导致双重求值的性能消耗.首先会以正常的方式求值,然后在执行过程中对包含于字符串中的代码发起另一个求值运算.双重求值是一项代价昂贵的操作,它比直接包含的代码执行速度慢很多.
setTimeout()和setInterval()建议传入函数而不是字符串来作为第一个参数.
| 使用Object/Array直接量 |
在js中创建对象和数组的方法有多种,但使用对象和数组的直接量是最快的方式.
//创建一个对象
var myObject=new Object();
myObject.name="aaa";
myObject.count=50;
//创建一个数组
var myArray=new Array();
myArray[0]="bbb";
myArray[1]=34;
//使用直接量创建一个对象
var myObject={name:"aaa",count:50};
//使用直接量创建一个数组
var myArray=["bbb",50];
| 不要重复工作 |
最常见的重复工作就是浏览器探测。下面是添加或移除事件处理器的示例，典型的跨浏览器的代码写法：
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){
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);
};
}
//调用新函数
addHandler(target,eventType,handler);
}
取消绑定的方法和上面的差不多，就不写了。
这个方法在第一次被调用时，会先检查并决定使用哪种方法去绑定事件处理器.然后原始函数被包含正确操作的新函数覆盖.最后一步调用新的函数,并传入原始参数.随后每次调用addHandler()都不会再做检测,因为检测代码已经被新的函数覆盖
2,条件预加载
在脚本加载期间提前检测,而不会等到函数被调用.
var addHandler=document.body.addEventListener? //三目运算符
function(target,evetType,handler){
target.addEventListener(eventType,handler,false);
}:function(target,eventType,handler){
target.attachEvent("on"+eventType,handler);
};
预加载适用于一个函数马上就要被用到,并且在整个页面的生命周期中频繁出现的场合.
| 使用速度快的部分 |
1,位操作
考虑使用直接操作数字的二进制形式的位运算
2,尽量使用原生方法
