高性能JavaScript摘要 (三)

编程实践

避免二次评估

JS脚本允许获取一个字符串当作脚本执行，四种方法可以实现。eval(),Function()构造器，setTimeout()和setInterval()。

var num1 = 5, num2 = 6;
var result = eval('num1 + num2');
console.log(result);
var sum = new Function('arg1', 'arg2', 'return arg1 + arg2');
console.log(sum(num1, num2));
setTimeout('var sum1=num1+num2;console.log(sum1)', 100);
setInterval('var sum2=num1+num2;console.log(sum2)', 100);

当在JS代码中出现另一端JS代码时，会付出二次评估的代价，二次评估是一项昂贵的操作，会花掉相应的更长的时间。应该避免eval(),Function()构造器的写法，setTimeout()和setInterval()使用传入函数的方法。

使用对象/数组直接量

不使用间接量，直接创建。

不要重复工作

例如在事件判断时，使用if(dom.addEventListener)无可厚非，但是浏览器不会变化，所以不用每次判断。

延迟加载

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);
}

这个函数第一次调用时，检查调用的句柄，然后原始函数就会被新的操作函数覆盖，最后调用该函数确保第一次调用成功。在以后再调用，就不会检测，因为检测代码已经被覆盖了。

条件项加载

var addHandler = docuemnt.addEventListener ?  function(target, eventType, handler){
		    target.addEventListener(eventType, handler, false);
		} : function(target, eventType, handler){
		    target.attachEvent('on' + eventType, handler);
		}

使用速度快的部分

位操作符

&^|~

原生方法