摘要：減少作用域鏈上的查找次數(shù)。盡量少用全局變量，盡量使用局部變量。全局變量如果不手動(dòng)銷毀，會(huì)一直存在，造成全局變量污染，可能很產(chǎn)生一些意想不到的錯(cuò)誤，而局部變量運(yùn)行完成后，就被會(huì)被回收使用代替大量的內(nèi)聯(lián)樣式修改。性能優(yōu)化還需要繼續(xù)深入研究。

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

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

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

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

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

上面這樣寫就非常耗時(shí)，我們可以優(yōu)化一下：

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 + " 測(cè)試 " + i;
    }
}

通過創(chuàng)建一個(gè)指向document的局部變量，就可以通過限制一次全局查找來改進(jìn)這個(gè)函數(shù)的性能。

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

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

（4）使用classname代替大量的內(nèi)聯(lián)樣式修改。很多時(shí)候我們會(huì)在用戶操作的時(shí)候，頁面元素樣式會(huì)進(jìn)行相應(yīng)的變化，這時(shí)候我們就可以把要變化的樣式寫成一個(gè)class,操作class變化，就能實(shí)現(xiàn)大量樣式的變化。

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

我們有可能會(huì)這樣寫

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("移動(dòng)");
            };
            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("移動(dòng)");
                            break;
                        case "select" :
                            alert("選擇");
                            break;
                    }
                }
            }
            
        }

而且使用事件委托，還有一個(gè)好處就是，當(dāng)你添加一個(gè)新的button，一樣的會(huì)綁定上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("移動(dòng)");
                            break;
                        case "select" :
                            alert("選擇");
                            break;
                    }             
})

這樣寫就簡(jiǎn)便得多。

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

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

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

（8）對(duì)字符串進(jìn)行循環(huán)操作，譬如替換、查找，應(yīng)使用正則表達(dá)式。因?yàn)楸旧鞪avaScript的循環(huán)速度就比較慢，而正則表達(dá)式的操作是用C寫成的語言的API，性能很好。

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

（10）浮點(diǎn)數(shù)轉(zhuǎn)換成整型使用Math.floor()或者M(jìn)ath.round()。parseInt()是用于將字符串轉(zhuǎn)換成數(shù)字，Math是內(nèi)部對(duì)象，所以Math.floor()其實(shí)并沒有多少查詢方法和調(diào)用的時(shí)間，速度是最快的。

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