成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

帶你玩轉(zhuǎn)prefetch, preload, dns-prefetch，defer和async

godiscoder / 641人閱讀

摘要：緊接著發(fā)現(xiàn)，于是又停了，瀏覽器下載并執(zhí)行完，繼續(xù)。，發(fā)現(xiàn)，遂將中文字展示了出來(lái)。的執(zhí)行時(shí)間是在所有元素解析完成之后，事件觸發(fā)之前。的執(zhí)行時(shí)間是在當(dāng)前腳本下載完成后，所以多個(gè)是執(zhí)行順序是不固定的。至此，完美的結(jié)構(gòu)出爐了。

現(xiàn)代瀏覽器性能優(yōu)化-JS篇 
眾所周知，JS的加載和執(zhí)行會(huì)阻塞瀏覽器渲染，所以目前業(yè)界普遍推薦把script放到之前，以解決js執(zhí)行時(shí)找不到dom等問(wèn)題。但隨著現(xiàn)代瀏覽器的普及，瀏覽器為我們提供了更多強(qiáng)大的武器，合理利用，方可大幅提高頁(yè)面加載速度。
理解渲染過(guò)程（HTML Parser）

首先我們從瀏覽器的角度解釋一下從輸入U(xiǎn)RL到頁(yè)面展示經(jīng)歷了些什么，以如下html文檔舉例



    
    


  
Text

瀏覽器自上而下讀取html文檔（此過(guò)程叫html parser），當(dāng)發(fā)現(xiàn)style.css文件時(shí)，瀏覽器parser停下來(lái)去搞css，等style.css下載并解析完畢，瀏覽器繼續(xù)parser。緊接著發(fā)現(xiàn)header.js， 于是html parser又停了，瀏覽器下載并執(zhí)行完header.js，繼續(xù)parser。此時(shí)屏幕上還什么都沒(méi)有。...parser，發(fā)現(xiàn)

，遂將p中文字展示了出來(lái)。緊接著又發(fā)現(xiàn)main.js，瀏覽器又停下parser，下載并執(zhí)行完main.js才繼續(xù)parser，直到頁(yè)面渲染完畢。

我們假設(shè)header.js中只有一行代碼console.log("header")， 但服務(wù)器響應(yīng)很慢，要10秒才能把它返回給瀏覽器，瀏覽器執(zhí)行這段代碼需要1ms，那在這 10s+1ms 內(nèi)，頁(yè)面將一直空白。瀏覽器執(zhí)行JS的時(shí)間取決于代碼質(zhì)量和硬件，并不是前端工程師隨便可以?xún)?yōu)化的，所以?xún)?yōu)化的重點(diǎn)在JS的下載時(shí)間。

核心：減少JS下載時(shí)間 預(yù)先解析DNS

非常簡(jiǎn)單，效果立竿見(jiàn)影，加快頁(yè)面加載時(shí)間，多用于預(yù)解析CDN的地址的DNS
Preload

瀏覽器會(huì)在遇到如下link標(biāo)簽時(shí)，立刻開(kāi)始下載main.js(不阻塞parser)，并放在內(nèi)存中，但不會(huì)執(zhí)行其中的JS語(yǔ)句。
只有當(dāng)遇到script標(biāo)簽加載的也是main.js的時(shí)候，瀏覽器才會(huì)直接將預(yù)先加載的JS執(zhí)行掉。

Prefetch

瀏覽器會(huì)在空閑的時(shí)候，下載main.js, 并緩存到disk。當(dāng)有頁(yè)面使用的時(shí)候，直接從disk緩存中讀取。其實(shí)就是把決定是否和什么時(shí)間加載這個(gè)資源的決定權(quán)交給瀏覽器。

如果prefetch還沒(méi)下載完之前，瀏覽器發(fā)現(xiàn)script標(biāo)簽也引用了同樣的資源，瀏覽器會(huì)再次發(fā)起請(qǐng)求，這樣會(huì)嚴(yán)重影響性能的，加載了兩次，，所以不要在當(dāng)前頁(yè)面馬上就要用的資源上用prefetch，要用preload。

JS在什么時(shí)候執(zhí)行的（defer和async）

上面我們的例子中，script標(biāo)簽都是在沒(méi)有多余屬性的情況下執(zhí)行的，只要下載過(guò)程結(jié)束，瀏覽器就會(huì)將JS執(zhí)行掉。
defer和async是script標(biāo)簽的兩個(gè)屬性，用于在不阻塞頁(yè)面文檔解析的前提下，控制腳本的下載和執(zhí)行。

defer，async與下載時(shí)機(jī)也有關(guān)，具體看這張圖。

defer的執(zhí)行時(shí)間是在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前。

async的執(zhí)行時(shí)間是在當(dāng)前JS腳本下載完成后，所以多個(gè)async script是執(zhí)行順序是不固定的。async只能用于加載一些獨(dú)立無(wú)依賴(lài)的代碼，比如Google Analysis之類(lèi)。

完美的結(jié)構(gòu)

前面兩節(jié)幫我們弄懂了JS的下載和執(zhí)行時(shí)機(jī)，那什么樣的頁(yè)面才是完美符合現(xiàn)代瀏覽器的那？其實(shí)關(guān)鍵在于的preload和prefetch！提前告知瀏覽器，我們的網(wǎng)站馬上要用的是什么，以后可能要用的是什么，瀏覽器才能更快的渲染頁(yè)面。下面是一段實(shí)例代碼




  
  Faster

首先，Parser在遇到head中preload時(shí)開(kāi)始下載JS，讀到script標(biāo)簽的時(shí)候，如果已經(jīng)下載完了，直接按順序執(zhí)行之。如果沒(méi)下載完，則會(huì)等到下載完再執(zhí)行。這樣就可以在剛進(jìn)入頁(yè)面時(shí)開(kāi)始非阻塞的下載JS代碼了。

其次，頁(yè)面會(huì)在空閑時(shí)，加載prefetch的JS，如果之后頁(yè)面發(fā)生跳轉(zhuǎn)，跳轉(zhuǎn)的目標(biāo)頁(yè)面引入了prefetch.js，瀏覽器會(huì)直接從disk緩存中讀取執(zhí)行。

將script標(biāo)簽依然放在之前，并增加defer標(biāo)簽，確保老瀏覽器兼容，并在所有DOM元素解析完成之后執(zhí)行其中的代碼。

至此，完美的HTML結(jié)構(gòu)出爐了。

CSS的下載和解析一樣會(huì)阻塞渲染，造成白屏，CSS中的字體文件更是影響首屏渲染關(guān)鍵因素之一，下一篇幅我會(huì)結(jié)合preload和prefetch，帶你一起優(yōu)化CSS，告訴你什么是最適合現(xiàn)代瀏覽器的CSS加載策略，期待的話，點(diǎn)個(gè)贊吧！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89110.html

相關(guān)文章

  • 帶你玩轉(zhuǎn)prefetch, preload, dns-prefetch，defer和async

    摘要：緊接著發(fā)現(xiàn)，于是又停了，瀏覽器下載并執(zhí)行完，繼續(xù)。，發(fā)現(xiàn)，遂將中文字展示了出來(lái)。的執(zhí)行時(shí)間是在所有元素解析完成之后，事件觸發(fā)之前。的執(zhí)行時(shí)間是在當(dāng)前腳本下載完成后，所以多個(gè)是執(zhí)行順序是不固定的。至此，完美的結(jié)構(gòu)出爐了。 現(xiàn)代瀏覽器性能優(yōu)化-JS篇 眾所周知，JS的加載和執(zhí)行會(huì)阻塞瀏覽器渲染，所以目前業(yè)界普遍推薦把script放到之前，以解決js執(zhí)行時(shí)找不到dom等問(wèn)題。但隨著現(xiàn)代瀏覽器...

    lewif 評(píng)論0 收藏0

  • 深度解析之異步加載和預(yù)加載

    摘要：當(dāng)然并不是所有的頁(yè)面需要用到的外部域名都需要做這樣的域名解析，瀏覽器默認(rèn)會(huì)解析超鏈接屬性的里面的域名，并且你的網(wǎng)站域名還不能是，如果是，則需要設(shè)置請(qǐng)求頭或加入一段強(qiáng)制開(kāi)啟域名解析的標(biāo)簽。 廢話：異步加載和預(yù)加載一直都是前端優(yōu)化必備技能之一，今天我們就來(lái)深度解析一下常用的幾個(gè)關(guān)鍵點(diǎn)。 異步加載 廢話不多說(shuō)，任何長(zhǎng)篇大論的教程都抵不過(guò)一張清晰明了的高清大圖來(lái)得好： showImg(http...

    qpal 評(píng)論0 收藏0

  • 深度解析之異步加載和預(yù)加載

    摘要：當(dāng)然并不是所有的頁(yè)面需要用到的外部域名都需要做這樣的域名解析，瀏覽器默認(rèn)會(huì)解析超鏈接屬性的里面的域名，并且你的網(wǎng)站域名還不能是，如果是，則需要設(shè)置請(qǐng)求頭或加入一段強(qiáng)制開(kāi)啟域名解析的標(biāo)簽。 廢話：異步加載和預(yù)加載一直都是前端優(yōu)化必備技能之一，今天我們就來(lái)深度解析一下常用的幾個(gè)關(guān)鍵點(diǎn)。 異步加載 廢話不多說(shuō)，任何長(zhǎng)篇大論的教程都抵不過(guò)一張清晰明了的高清大圖來(lái)得好： showImg(http...

    HackerShell 評(píng)論0 收藏0

  • 重學(xué) html の link標(biāo)簽

    摘要：元素規(guī)定了外部資源與當(dāng)前文檔的關(guān)系。常用于鏈接樣式表，創(chuàng)建網(wǎng)站圖標(biāo)，預(yù)加載資源等。那么我們就可以在標(biāo)簽設(shè)置字體的。注意當(dāng)界面加載時(shí)，兩個(gè)樣式表都會(huì)下載到客戶端，只是會(huì)根據(jù)場(chǎng)景不同使用不同的樣式。標(biāo)簽的和屬性的區(qū)別和目的引用一步前端 link元素規(guī)定了外部資源與當(dāng)前文檔的關(guān)系。常用于鏈接樣式表，創(chuàng)建網(wǎng)站圖標(biāo)，預(yù)加載資源等。 鏈接樣式表? 創(chuàng)建站點(diǎn)圖標(biāo) 預(yù)加載 用于前端界面性能優(yōu)化...

    ruicbAndroid 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<