摘要：上面代碼優(yōu)化后盡量使用局部變量緩存全局變量在實(shí)際開發(fā)中盡量使用局部變量緩存全局變量，因?yàn)?，到一個(gè)函數(shù)多次訪問全局變量的時(shí)候，會(huì)出現(xiàn)一個(gè)作用域練查找的過程，全局作用域位置越深找到的時(shí)間就越久，因此這也會(huì)涉及到性能的執(zhí)行速度問題。

本來想整理一篇完整的JavaScript優(yōu)化知識(shí)點(diǎn)出來跟大家討論分享一下的，但是由于最近個(gè)人的時(shí)間比較少，所以先整理了兩個(gè)知識(shí)點(diǎn)，之后有時(shí)間了再繼續(xù)整理后面的。不喜歡勿噴，有錯(cuò)誤的歡迎大佬指點(diǎn)。

2019/05/14/01:30

多數(shù)瀏覽器都是使用單一的進(jìn)程來處理用戶界面（UI）和JavaScript腳本執(zhí)行，所以同一時(shí)刻只能做一件事，因此就會(huì)造成瀏覽器的堵塞狀態(tài)，JavaScript腳本執(zhí)行過程耗時(shí)越久，瀏覽器等待響應(yīng)的時(shí)間就越長(zhǎng)。（也就是說當(dāng)頁面加載的時(shí)候，遇到script標(biāo)簽的時(shí)候，頁面加載就會(huì)被終止，等到JavaScript腳本執(zhí)行完畢后，再繼續(xù)加載頁面，這樣給用戶的體驗(yàn)特別不會(huì)，很容易首次加載頁面的時(shí)候出現(xiàn)白屏狀態(tài)。）

傳統(tǒng)的方式

傳統(tǒng)的方式就是，把JavaScript的腳本放到head標(biāo)簽之后之前，也就把script標(biāo)簽放到最尾處，來確保頁面加載完之后才執(zhí)行JavaScript腳本，從而達(dá)到一些不必要的阻塞。（可能這也是我們平時(shí)用得比較多的方式）

延遲JavaScript腳本執(zhí)行

1.HTML4為script標(biāo)簽擴(kuò)展了一個(gè)Defer屬性，指定這個(gè)屬性的script標(biāo)簽的腳本不會(huì)修改DOM，因此代碼能安全的延遲執(zhí)行。加上這個(gè)屬性的script標(biāo)簽的腳本可以放在DOM的任意位置，當(dāng)瀏覽器加載到它是，它會(huì)被下載，但不會(huì)被執(zhí)行，所以不能阻塞頁面的方面，它會(huì)等到頁面加載完成后，在windown的load()函數(shù)之后執(zhí)行。

2.在H5的時(shí)候，script又?jǐn)U展了一個(gè)async屬性，它與defer相同點(diǎn)就是都是采用并行下載，不會(huì)在下載的過程造成頁面的阻塞情況；不同點(diǎn)就是，它們的執(zhí)行時(shí)機(jī)：async加載完之后，自動(dòng)執(zhí)行（也就是說，當(dāng)加載到它的時(shí)候，瀏覽器可以繼續(xù)往下加載頁面，當(dāng)它加載完之后，它就會(huì)自動(dòng)執(zhí)行，而不需要等到頁面加載完之后再執(zhí)行，也不用頁面加載等它執(zhí)行完再往后執(zhí)行）；而dafer要等頁面加載完成后才會(huì)執(zhí)行。

合拼JavaSript腳本

因?yàn)槊總€(gè)script標(biāo)簽初始下載是=時(shí)都會(huì)阻塞頁面渲染，所以減少頁面包含的script標(biāo)簽數(shù)量也有助于頁面加載性能的優(yōu)化。（如果頁面有很多的script標(biāo)簽，沒個(gè)script標(biāo)簽都會(huì)發(fā)送一次http請(qǐng)求（http://tool.oschina.net/jscom...），從而浪費(fèi)了很多沒必要的時(shí)間，我們可以通過某些在線工具將多個(gè)script標(biāo)簽合拼成一個(gè)script標(biāo)簽，最終頁面只引用了一個(gè)script，也就是只發(fā)送了一次http請(qǐng)求，這樣加載性能會(huì)比之前加載多個(gè)script標(biāo)簽快）

2019/05/15/02:05

JavaScript的作用域同樣關(guān)系到性能的問題

在es6之前JavaScript沒有什么塊級(jí)作用域所說，只有全局作用域和函數(shù)作用域。（沒什么塊級(jí)作用域有時(shí)會(huì)給我們帶很多莫民奇妙的東西），例如：一個(gè)經(jīng)典的面試題：

//結(jié)果輸出什么？
    for(var i = 0; i<10;i++){
            setTimeout(function () {
                console.log(i)
            },1000)
        }

我們期望的結(jié)果是輸出0-9。但是結(jié)果拼不是我們想這樣，這玩（diao）意(mao)既然輸出十次10.為什么會(huì)這樣？因?yàn)楫?dāng)setTimeout執(zhí)行的時(shí)候，for循環(huán)已經(jīng)完成，已經(jīng)變成了10。

怎樣解決？（在es6沒有到來之前，一般都是同閉包的方法把作用域緩存起來）

for(var i = 0; i<10;i++){
        (function(i){
            setTimeout(function () {
                console.log(i)
            },1000)
        })(i)
    }
//結(jié)果輸出為0-9

最后輸出的結(jié)果就跟我們期待的一樣了，但是上面使用了閉包，閉包也涉及到作用域鏈的性能問題；因?yàn)殚]包的屬性包含了與執(zhí)行環(huán)境作用域相同的對(duì)象的引用，因此導(dǎo)致閉包里面的變量沒辦法被銷毀，從而占用了更多的內(nèi)存空間，也有可能導(dǎo)致內(nèi)存泄漏問題，所以使用閉包時(shí)還是要謹(jǐn)慎，它關(guān)系到內(nèi)存以及執(zhí)行速度。

//上面代碼優(yōu)化后
for(let i = 0; i<10;i++){
            setTimeout(function () {
                console.log(i)
            },1000)
        }

2.盡量使用局部變量緩存全局變量

在實(shí)際開發(fā)中盡量使用局部變量緩存全局變量，因?yàn)?，到一個(gè)函數(shù)多次訪問全局變量的時(shí)候，會(huì)出現(xiàn)一個(gè)作用域練查找的過程，全局作用域位置越深找到的時(shí)間就越久，因此這也會(huì)涉及到性能的執(zhí)行速度問題。例如：下面這段簡(jiǎn)單的代碼，在瀏覽器打開執(zhí)行看到還是挺快的，沒什么問題；但是，它三次引用了obj.name這個(gè)全局變量，在這個(gè)查找的過程中必須遍歷整個(gè)作用域鏈，直到找到為止（幸虧這個(gè)全局變量比較淺，幸虧，這段代碼只引用了三次；要這個(gè)全局變量在window對(duì)象上面呢，要是這個(gè)全局變量會(huì)被引用幾千萬次呢），然后我們可以將這個(gè)多次被引用的全局變量，用局部變量存起來，這樣無論這個(gè)全局變量被引用多次，它都只會(huì)查找一次。

let obj = {
        name:"July"
}

function Person() {
    console.log(obj.name +"去吃飯",obj.name +"去睡覺",obj.name +"去打籃球")
}

Person()

//改

let obj = {
        name:"July"
}

function Person() {
    let name = obj.name
    console.log(name +"去吃飯",name +"去睡覺",name +"去打籃球")
}

Person()

3.盡量不要使用動(dòng)態(tài)作用域，因?yàn)樗麄儠?huì)改變執(zhí)行環(huán)境的作用域鏈。比如with()語句和try{}catch(){}的catch(){}字句...,它們都會(huì)改變執(zhí)行環(huán)境的作用域鏈。比如下面這段代碼：with會(huì)把一個(gè)包含了obj全部屬性的新的可變變量置于作用域鏈的頭部，使得訪問obj對(duì)象屬性速度非?？欤窃L問局部變量則變慢了，因此還是盡量避免使用。

let obj = {
    name:"July"
}

function Person() {
    with(obj){
        console.log(name +"去吃飯",name +"去睡覺",name +"去打籃球")
    }
}
Person()