JS程式碼的執行效率往往直接影響了頁面的效能，有的時候，實現同樣的功能，不同的JS程式碼往往在效率上相差很多，有的時候僅僅是由於我們的書寫習慣導致的，當然在高階點的瀏覽器中，它們大多都已經幫我們優化了，但是在中國，萬惡的IE6仍然大量的存在，我們不得不去考慮它。對於JS程式碼的優化，實際上有很多的情況，有些影響是比較小的，而有些是比較嚴重的，本文中，我把幾個我認為影響比較嚴重的情況列出來，供大家參考。

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) + "毫秒");   
}   
我們看看其在不同瀏覽器下執行的情況 

我們會發現，在IE6下其差別是相當明顯的，其實這種情況在IE的高版本中體現的也非常明顯，但是在Firefox下卻沒有多大的區別，相反第二種的相對效率還要低點，不過只是差別2ms左右，而Chrome也和Firefox類似。另外在這裡順便說明一下，在我們給陣列新增元素的時候，很多人喜歡用陣列的原生的方法push，其實直接用arr[i]或者arr[arr.length]的方式要快一點，大概在10000次迴圈的情況IE瀏覽器下會有十幾毫秒的差別。
--------------------- 
作者：I-T梟 
來源：CSDN 
原文：https://blog.csdn.net/hahahhahahahha123456/article/details/81879616 
版權宣告：本文為博主原創文章，轉載請附上博文連結！