JS代码优化 博客分类： javascript

1、字符串的拼接

  用数组join的方法代替+=的方法，可以提高执行效率；

 

  实例：

<div class="one" id="one"></div>   

<input type="button" value="效率低" onclick="func1()" />   


<input type="button" value="效率高" onclick="func2()" /> 

//效率低的   

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) + "毫秒");   

}   

//效率高的   


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) + "毫秒");   

}



2、for循环
在我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。主要是因为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点
    


var arr = [];   

for(var i = 0; i < 10000; i++){   


    arr[i] = "<div>" + i + "</div>";   

}   

document.body.innerHTML += arr.join("");   

    

//效率低的   


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) + "毫秒");   

}   

//效率高的   


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) + "毫秒");   

} 



2、for循环
在我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。主要是因为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点
    


var arr = [];   

for(var i = 0; i < 10000; i++){   


    arr[i] = "<div>" + i + "</div>";   

}   

document.body.innerHTML += arr.join("");   

    

//效率低的   


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) + "毫秒");   

}   

//效率高的   


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) + "毫秒");   

} 







3、减少页面的重绘

var str = "<div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div>";   

//效率低的   


function func1(){   


    var obj = document.getElementById("one");   


    var start = new Date().getTime();   


    for(var i = 0; i < 100; i++){   

        obj.innerHTML += str + i;   
    }   

    var end = new Date().getTime();   


    alert("用时 " + (end - start) + " 毫秒");   

}   

//效率高的   


function func2(){   


    var obj = document.getElementById("one");   


    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) + " 毫秒");   


} 	


	一般影响页面重绘的不仅仅是innerHTML，如果改变元素的样式，位置等情况都会触发页面重绘.