摘要：減少作用域鏈上的查找次數。盡量少用全局變量，盡量使用局部變量。全局變量如果不手動銷毀，會一直存在，造成全局變量污染，可能很產生一些意想不到的錯誤，而局部變量運行完成后，就被會被回收使用代替大量的內聯樣式修改。性能優化還需要繼續深入研究。

關于前端性能優化的討論一直都很多，包羅的知識也很多，可以說性能優化只有更好，沒有最好。前面我寫了一篇關于css優化的總結文章，今天再從javascript方面聊一聊。

1.從資源加載方面來說，瀏覽器的加載順序是按源碼從上到下加載解析的，遇到link,script等資源都會阻塞頁面渲染，所以我們會把script放在前面，我們還可以結合構建工具（webpack,gulp...）壓縮js文件，抽離公共js、去掉空格、注釋，盡可能地讓js文件變小，防止腳本阻塞頁面渲染。

2.在寫代碼的時候我們還要注意以下問題。

（1）減少作用域鏈上的查找次數。我們知道，js代碼在執行的時候，如果需要訪問一個變量或者一個函數的時候，它需要從當前執行環境的作用域鏈一級一級地向上查找，直到全局作用域。如果我們需要經常訪問全局環境的變量對象的時候，我們每次都必須在當前作用域鏈上一級一級的遍歷，這顯然是比較耗時的。

function getTitle() {
    var h1 = document.getElementByTagName("h1");
    for(var i = 0, len = h1.length; i < len; i++) {
        h1[i].innerHTML = document.title + " 測試 " + i;
    }
}

上面這樣寫就非常耗時，我們可以優化一下：

function getTitle() {
    var doc = document;
    var h1 = doc.getElementByTagName("h1");
    for(var i = 0, len = h1.length; i < len; i++) {
        h1[i].innerHTML = doc.title + " 測試 " + i;
    }
}

通過創建一個指向document的局部變量，就可以通過限制一次全局查找來改進這個函數的性能。

（2）閉包導致的內存泄露。
閉包可以保證函數內的變量安全，可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中，不會被自動清除。使用場合：設計私有的方法和變量。使用不當就會造成內存占用過高。我們需要手動銷毀內存中的變量。

（3）盡量少用全局變量，盡量使用局部變量。全局變量如果不手動銷毀，會一直存在，造成全局變量污染，可能很產生一些意想不到的錯誤，而局部變量運行完成后，就被會被回收；

（4）使用classname代替大量的內聯樣式修改。很多時候我們會在用戶操作的時候，頁面元素樣式會進行相應的變化，這時候我們就可以把要變化的樣式寫成一個class,操作class變化，就能實現大量樣式的變化。

（5）批量元素綁定事件，可以使用事件委托。事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。比如我們有100個li，每個li都要綁定click點擊事件，就可以用事件委托。舉一個例子：我們需要給所有的button綁定click事件

我們有可能會這樣寫

window.onload = function(){
            var Add = document.getElementById("add");
            var Remove = document.getElementById("remove");
            var Move = document.getElementById("move");
            var Select = document.getElementById("select");
            
            Add.onclick = function(){
                alert("添加");
            };
            Remove.onclick = function(){
                alert("刪除");
            };
            Move.onclick = function(){
                alert("移動");
            };
            Select.onclick = function(){
                alert("選擇");
            }
        }

用事件委托就可以這樣寫：

window.onload = function(){
            var oBox = document.getElementById("box");
            oBox.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLocaleLowerCase() == "input"){
                    switch(target.id){
                        case "add" :
                            alert("添加");
                            break;
                        case "remove" :
                            alert("刪除");
                            break;
                        case "move" :
                            alert("移動");
                            break;
                        case "select" :
                            alert("選擇");
                            break;
                    }
                }
            }
            
        }

而且使用事件委托，還有一個好處就是，當你添加一個新的button，一樣的會綁定上click事件，這就是委托事件的好處。上面這樣的寫法是原生js的寫法，jquery可以這樣寫：

$("#box").on("click","input",function(event){
             var targetId = $(this).attr("id");
              switch(targetId){
                        case "add" :
                            alert("添加");
                            break;
                        case "remove" :
                            alert("刪除");
                            break;
                        case "move" :
                            alert("移動");
                            break;
                        case "select" :
                            alert("選擇");
                            break;
                    }             
})

這樣寫就簡便得多。

（6）避免不必要的DOM操作，盡量使用 ID 選擇器：ID選擇器是最快的，避免一層層地去查找節點。

（7）類型轉換：把數字轉換成字符串使用number + "" 。
雖然看起來比較丑一點，但事實上這個效率是最高的，性能上來說:

("" + ) > String() > .toString() > new String()  

（8）對字符串進行循環操作，譬如替換、查找，應使用正則表達式。因為本身JavaScript的循環速度就比較慢，而正則表達式的操作是用C寫成的語言的API，性能很好。

（9）對象查詢使用[""]查詢要比.items()更快。這和前面的減少對象查找的思路是一樣的，調用.items()增加了一次查詢和函數的調用。

（10）浮點數轉換成整型使用Math.floor()或者Math.round()。parseInt()是用于將字符串轉換成數字，Math是內部對象，所以Math.floor()其實并沒有多少查詢方法和調用的時間，速度是最快的。

關于js性能優化來說，涉及到很多方面，特別是現在又出現很多的前端框架，優化方法又各有不同。上面說的這些只是很淺顯的東西，在開發中多注意一下就可以了，盡量精簡自己的代碼。性能優化還需要繼續深入研究。