国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

優(yōu)化JavaScript總結(jié)分享（上）

jackwang / 2299人閱讀

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

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

2019/05/14/01:30

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

優(yōu)化方式

傳統(tǒng)的方式

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

延遲JavaScript腳本執(zhí)行

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







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

合拼JavaSript腳本

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

2019/05/15/02:05

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

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

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

我們期望的結(jié)果是輸出0-9。但是結(jié)果拼不是我們想這樣，這玩（diao）意(mao)既然輸出十次10.為什么會這樣？因為當setTimeout執(zhí)行的時候，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é)果就跟我們期待的一樣了，但是上面使用了閉包，閉包也涉及到作用域鏈的性能問題；因為閉包的屬性包含了與執(zhí)行環(huán)境作用域相同的對象的引用，因此導(dǎo)致閉包里面的變量沒辦法被銷毀，從而占用了更多的內(nèi)存空間，也有可能導(dǎo)致內(nèi)存泄漏問題，所以使用閉包時還是要謹慎，它關(guān)系到內(nèi)存以及執(zhí)行速度。

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

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

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

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.盡量不要使用動態(tài)作用域，因為他們會改變執(zhí)行環(huán)境的作用域鏈。比如with()語句和try{}catch(){}的catch(){}字句...,它們都會改變執(zhí)行環(huán)境的作用域鏈。比如下面這段代碼：with會把一個包含了obj全部屬性的新的可變變量置于作用域鏈的頭部，使得訪問obj對象屬性速度非常快，但是訪問局部變量則變慢了，因此還是盡量避免使用。

let obj = {
    name:"July"
}

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109707.html

相關(guān)文章

  • 個人分享--web前端學(xué)習資源分享

    摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時候，會進行總結(jié)或者分享會議那么今天我就把看過的一些學(xué)習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時候，會進行總結(jié)或者分享會議！那么今天我就...

    sherlock221 評論0 收藏0

  • 前端資源系列（4）-前端學(xué)習資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習資源做一個匯總，方便自己學(xué)習查閱參考，和好友們共同進步。 特意對前端學(xué)習資源做一個匯總，方便自己學(xué)習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...

    princekin 評論0 收藏0

  • 前端開發(fā)周報：JavaScript編程術(shù)語和web圖片優(yōu)化

    摘要：函數(shù)式編程術(shù)語大全函數(shù)式編程有許多優(yōu)點，它也越來越流行了。然而，每個編程范式都有自己獨特的術(shù)語，函數(shù)式編程也不例外。作用域有兩種類似全局作用域和局部作用域。目前最重要的應(yīng)用場景之一，就是在的握手階段，客戶端服務(wù)端利用算法交換對稱密鑰。 1、JavaScript 函數(shù)式編程術(shù)語大全 函數(shù)式編程(FP)有許多優(yōu)點，它也越來越流行了。然而，每個編程范式都有自己獨特的術(shù)語，函數(shù)式編程也不例外。...

    kbyyd24 評論0 收藏0

  • 前端開發(fā)周報：JavaScript編程術(shù)語和web圖片優(yōu)化

    摘要：函數(shù)式編程術(shù)語大全函數(shù)式編程有許多優(yōu)點，它也越來越流行了。然而，每個編程范式都有自己獨特的術(shù)語，函數(shù)式編程也不例外。作用域有兩種類似全局作用域和局部作用域。目前最重要的應(yīng)用場景之一，就是在的握手階段，客戶端服務(wù)端利用算法交換對稱密鑰。 1、JavaScript 函數(shù)式編程術(shù)語大全 函數(shù)式編程(FP)有許多優(yōu)點，它也越來越流行了。然而，每個編程范式都有自己獨特的術(shù)語，函數(shù)式編程也不例外。...

    kelvinlee 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<