JavaScript提高效率之编程实践

1. 避免双重求值
   所谓的双重求值是指一段JS代码在另一端JS代码中执行，常见的Function()构造函数、eval()、定时器（setTimeout和setInterval）就是典型的例子。
   通过双重求值代码执行速度比直接执行代码速度慢很多，应尽量避免这种情况。

2. 使用Object/Array直接量
   使用直接量或字面量会使代码执行速度更快。

3. 避免重复工作
   下边的例子中每次调用addHandler()和removeHandler()函数都要检测浏览器类型是否为IE，而实际情况下，相同环境下我们只需要检查一次。

    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.attachEvent("on" + eventType, handler);
    }
}

改进方法有两种：延迟加载和条件预加载；延迟加载主要用于函数不会在页面中立即调用的情况；而条件预加载是在脚本加载时就进行检查,并且该操作只进行一次不会在函数调用时执行，适用于页面中频繁调用相同函数的情况。下边的代码是使用两种情况分别进行改进的实现方式：

/**
*延迟加载实现
*/
//添加事件监听
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" + enventType, handler);
        }
    }
}

//移除事件监听
function removeHandler(target, eventType, handler) {
    if(target.removeEventListener) {
        removeHandler = function (target, eventType, handler) {
            target.removeEventHandler(eventType, handler);
        }
    } else { //IE
        removeHandler = function (target, eventType, handler) {
            target.detachEvent("on" + eventType, handler);
        }
    }
}

/**
 * 条件预加载实现
 */
var addHandler = document.body.addEventListener ? 
                 function (target, eventType, handler) {
                    target.addEventListener(eventType, handler, false);
                 } :
                 function (target, eventType, handler) {
                    target.attachEvent("on" + eventType, handler);
                 };

var removeListener = document.body.removeEventListener ?
                     function (target, eventType, handler) {
                        target.removeEventListener(eventType, handler, false);
                     } :
                     function (target, eventType, handler) {
                        target.detachEvent("on" + eventType, handler);
                     };

1. 使用位操作和原生的JS方法

References：

• 《高性能JavaScript》