编程实践之性能优化

---

一、避免双重求值

双重求值：在js代码中执行另一段js代码时，会导致双重求值的性能消耗。在js代码中执行一个包含js代码的字符串的方法有。

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

双重求值慢的原因是每次调用这些函数时都要创建一个新的解释器/编译器实例

解决方法是，避免使用eval函数和Function()构造函数，setTimeout()和setInterval()建议传入函数而不是字符串来作为第一个参数。

二、使用Object/Array 直接量

在js中创建对象和数组时，使用对象和数组直接量是最快的操作

三、避免重复工作

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

这个就是重复工作，每次调用addHandler都会重新走一次判断。

延迟加载

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时，走一次流程，并将它们覆盖。

条件预加载

在脚本addHandler、removeHandler执行之前就检测了一次，把真正的addHandler、removeHandler设置好。

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

四、使用速度快的部分

js被指责慢，其实它的js引擎并不慢（它是有低级语言写的，如c），慢的是js代码。

位操作

js中位操作是有优势的。js的位操作有位或、位异或、位与、位非。用位运算提高运算速度的方式例子——对2取模实现颜色设置、位掩码。

对2取模实现颜色设置例子

for(var i = 0, len = rows.length; i < len; i++) {
    if (i % 2) {
        className = "even";
    } else {
        className = "odd";
    }
    //apply class
}

// 通过位运算提高运算速度
for (var i = 0, len = rows.length; i < len; i++) {
    if (i & 1) {
        className = "odd";
    } else {
        className = "even";
    }
    //apply class
}

位掩码例子。

var OPTION_A = 1;
var OPTION_B = 2;
var OPTION_C = 4;
var OPTION_D = 8;
var OPTION_E = 16;

//你自己的选项
var options = OPTION_A | OPTION_C | OPTION_D;

// 对你选择的选项进行判断
if (options & OPTION_A) {
    //do something
}
if (options & OPTION_B) {
    //do something
}

原生方法

无论你怎么优化js代码，速度都没有js引擎提供的原生方法快。所以尽量使用Js提供的Math对象。

选择器API中，querySelector() 与 querySelectorAll()都比jquery快。