JS操作性能优化

1. 适当使用变量

 Maybe

document.getElementById("myField").style.backgroundColor = "#CCC";
document.getElementById("myField").style.color = "#FF0000";
document.getElementById("myField").style.fontWeight = "bold";

Better

var myField = document.getElementById("myField");

myField.style.backgroundColor = "#CCC";
myField.style.color = "#FF0000";
myField.style.fontWeight = "bold";

每次调用document.getElementById("myField")，浏览器都要在 DOM 中搜索 ID 为 myField 的元素，效率低。

2. 元素尽量一次性应用全部样式

Maybe

var myField = document.getElementById("myField");
myField.style.backgroundColor = "#CCC";
myField.style.color = "#FF0000";
myField.style.fontWeight = "bold";

Better

var myField = document.getElementById("myField");

myField.style.cssText = "background-color: #CCC; color: #FF0000; font-weight: bold";

对 ID 为 myField 的元素，分别使用 style 应用三个不同的样式属性。将导致三次回流（reflow）和重绘（repaint），效率低，可以一次性应用全部样式，只导致一次回流和重绘。

3. for循环遍历数组

Maybe

var myArray = [1, 2, 3];

for(var i=0; i < myArray.length; i++) {
    //do something
}

Better

var i = 0,
    myArray = [1, 2, 3],
    len = myArray.lenght;

for(; i<len; i++){
    //do something        
}

每次循环迭代时，i<myArray.length 都要重新计算 myArray.length 数组的长度， 效率低。

4. 数组包含的元素太多

数组包含的元素太多，势必会导致循环的次数非常的多，如果操作也非常多，循环时间过长会直接导致锁死浏览器。倘若后面的循环不依赖前面的处理结果，则可以对循环进行拆解，这样不会长时间占用处理器，使浏览器有一个流畅的状态。

function handle(arr, callback){
    setTimeout(function(){
        callback(arr.shift());
        if(arr.length){
            setTimeout(arguments.callee, 0);
        }
    }, 0);
}

5. 函数内不相干的操作太多

函数内有很多不相干的操作，也可以进行拆解。

function handle(){
    setTimeout(doSomething1, 0);
    setTimeout(doSomething2, 0);
    setTimeout(doSomething3, 0);
    setTimeout(doSomething4, 0);
}

6. 优化递归函数

斐波那契（Fibonacci）数列是一个非常简单的递归数列，除第一个和第二个数外，任意一个数都可由前两个数相加得到。

var i = 0;

function fibonacci(n){
    i++;
    return n<2 ? n: fibonacci(n-1) + fibonacci(n-2);
}

console.log(fibonacci(40));  //102334155 
console.log("counter: " + i);  //counter: 331160281 

哇，一个函数执行那么多次，其实在递归过程中，重复计算的次数非常多，比如：要得到fibonacic(40)的值，要计算fibonacic(39)、fibonacic(38)、fibonacic(37)、fibonacic(36)、fibonacic(35)、fibonacic(34).....fibonacic(1)，要得到fibonacic(39)的值，又要重复计算fibonacic(38)、fibonacic(37)、fibonacic(36)、fibonacic(35)、fibonacic(34).....fibonacic(1)，随着n增大，重复计算的次数增长的非常快。那我们不要重复计算值来看看：

var i = 0;
fibonacci = function (n) {
    var memo = {
        0: 0,
        1: 1
    };
    var fib = function (n) {
        i++;
        if ('undefined' === typeof memo[n]) {
            memo[n] = fib(n - 1) + fib(n - 2);
        }
        return memo[n];
    };
    return fib(n);
}

console.log(fibonacci(40)); //102334155 
console.log("counter: " + i); //counter: 79

这次函数只执行了79次，节省了不少性能开销吧！！！

 

优化的目的就是让浏览器表现的更流畅，快速的响应用户操作，但请记住不要滥用这些优化的方法！