JS优化 [记录]

 

    // 字符串拼接
　　    array[i] = "<input type='button' value='a'>";
　　    document.getElementById("one").innerHTML = array.join("");   
    // for循环（先计算长度判断,效率高于直接判断） 
　　　　for(var i = 0, len = divs.length; i < len; i++){ 
    // 减少页面的重绘
　　　　arr[i] = str + i;
　　　　obj.innerHTML = arr.join("");  
    // 减少作用域链上的查找次数
　　　　var doc = document;
　　　　doc.getElementById("but1");
    // 避免双重解释        

 

 

1、字符串拼接

//效率高的   
function func2(){   
    var start = new Date().getTime();   
    var array = [];   
    for(var i = 0; i < 10000; i++){   
        array[i] = "<input type='button' value='a'>";   
    }   
    var end = new Date().getTime();   
    document.getElementById("one").innerHTML = array.join("");   
    alert("用时:" + (end - start) + "毫秒");   
}   

//效率低的   
function func1(){   
    var start = new Date().getTime();   
    var template = "";   
    for(var i = 0; i < 10000; i++){   
        template += "<input type='button' value='a'>";   
    }   
    var end = new Date().getTime();   
    document.getElementById("one").innerHTML = template;   
    alert("用时:" + (end - start) + "毫秒");   
}   

 

2、for循环（先计算长度判断,效率高于直接判断）

//效率高的   
function func2(){   
    var divs = document.getElementsByTagName("div");   
    var start = new Date().getTime();   
    for(var i = 0, len = divs.length; i < len; i++){   
        //"效率高"   
    }   
    var end = new Date().getTime();   
    alert("用时：" + (end - start) + "毫秒");   
} 

//效率低的   
function func1(){   
    var divs = document.getElementsByTagName("div");   
    var start = new Date().getTime();   
    for(var i = 0; i < divs.length; i++){   
        //"效率低"   
    }   
    var end = new Date().getTime();   
    alert("用时：" + (end - start) + "毫秒");   
}   

 

3、减少页面的重绘

//效率高的   
function func2(){   
    var obj = document.getElementById("demo");   
    var start = new Date().getTime();   
    var arr = [];   
    for(var i = 0; i < 100; i++){   
        arr[i] = str + i;   
    }   
    obj.innerHTML = arr.join("");   
    var end = new Date().getTime();   
    alert("用时 " + (end - start) + " 毫秒");   
} 


//效率低的   
function func1(){   
    var obj = document.getElementById("demo");   
    var start = new Date().getTime();   
    for(var i = 0; i < 100; i++){   
        obj.innerHTML += str + i;   
    }   
    var end = new Date().getTime();   
    alert("用时 " + (end - start) + " 毫秒");   
}   

 

4、减少作用域链上的查找次数

//高效率
function func2(){   
    var start = new Date().getTime();   
    var doc = document;   
    for(var i = 0; i < 10000; i++){   
        var but1 = doc.getElementById("but1");   
        var but2 = doc.getElementById("but2");   
        var inputs = doc.getElementsByTagName("input");   
        var divs = doc.getElementsByTagName("div");   
        var but1 = doc.getElementById("but1");   
        var but2 = doc.getElementById("but2");   
        var inputs = doc.getElementsByTagName("input");   
        var divs = doc.getElementsByTagName("div");   
        var but1 = doc.getElementById("but1");   
        var but2 = doc.getElementById("but2");   
        var inputs = doc.getElementsByTagName("input");   
        var divs = doc.getElementsByTagName("div");   
        var but1 = doc.getElementById("but1");   
        var but2 = doc.getElementById("but2");   
        var inputs = doc.getElementsByTagName("input");   
        var divs = doc.getElementsByTagName("div");   
        var but1 = doc.getElementById("but1");   
        var but2 = doc.getElementById("but2");   
        var inputs = doc.getElementsByTagName("input");   
        var divs = doc.getElementsByTagName("div");   
        var but1 = doc.getElementById("but1");   
        var but2 = doc.getElementById("but2");   
        var inputs = doc.getElementsByTagName("input");   
        var divs = doc.getElementsByTagName("div");   
    }   
    var end = new Date().getTime();   
    alert("用时 " + (end - start) + " 毫秒");   
} 

//低效率
function func1(){   
    var start = new Date().getTime();   
    for(var i = 0; i < 10000; i++){   
        var but1 = document.getElementById("but1");   
        var but2 = document.getElementById("but2");   
        var inputs = document.getElementsByTagName("input");   
        var divs = document.getElementsByTagName("div");   
        var but1 = document.getElementById("but1");   
        var but2 = document.getElementById("but2");   
        var inputs = document.getElementsByTagName("input");   
        var divs = document.getElementsByTagName("div");   
        var but1 = document.getElementById("but1");   
        var but2 = document.getElementById("but2");   
        var inputs = document.getElementsByTagName("input");   
        var divs = document.getElementsByTagName("div");   
        var but1 = document.getElementById("but1");   
        var but2 = document.getElementById("but2");   
        var inputs = document.getElementsByTagName("input");   
        var divs = document.getElementsByTagName("div");   
        var but1 = document.getElementById("but1");   
        var but2 = document.getElementById("but2");   
        var inputs = document.getElementsByTagName("input");   
        var divs = document.getElementsByTagName("div");   
        var but1 = document.getElementById("but1");   
        var but2 = document.getElementById("but2");   
        var inputs = document.getElementsByTagName("input");   
        var divs = document.getElementsByTagName("div");   
    }   
    var end = new Date().getTime();   
    alert("用时 " + (end - start) + " 毫秒");   
}

 

5、避免双重解释
var sum, num1 = 1, num2 = 2; 
//效率高
function func2(){   
    var start = new Date().getTime();   
    for(var i = 0; i < 10000; i++){   
        sum+=num1;   
        num1+=num2;   
        num2++;   
    }   
    var end = new Date().getTime();   
    alert("用时 " + (end - start) + " 毫秒");   
} 
//效率低  
function func1(){   
    var start = new Date().getTime();   
    for(var i = 0; i < 10000; i++){   
        var func = new Function("sum+=num1;num1+=num2;num2++;");   
        func();   
    }   
    var end = new Date().getTime();   
    alert("用时 " + (end - start) + " 毫秒");   
}   


var sum, num1 = 1, num2 = 2; 
//高效率
function func2(){   
    var start = new Date().getTime();   
    for(var i = 0; i < 1000; i++){   
        sum+=num1;   
        num1+=num2;   
        num2++;   
    }   
    var end = new Date().getTime();   
    alert("用时 " + (end - start) + " 毫秒");   
} 
//低效率  
function func1(){   
    var start = new Date().getTime();   
    for(var i = 0; i < 1000; i++){   
        eval("sum+=num1;num1+=num2;num2++;");   
    }   
    var end = new Date().getTime();   
    alert("用时 " + (end - start) + " 毫秒");   
}