資訊專欄INFORMATION COLUMN
摘要：徹底搞懂通過瀏覽器的開發(fā)者工具可以直觀的看到，圖中藍(lán)色的線和藍(lán)色的字使用不同的表現(xiàn)形式表示這個(gè)事件觸發(fā)的時(shí)間。當(dāng)腳本下載完后立即執(zhí)行，執(zhí)行順序不確定。
徹底搞懂 defer & async DOMContentLoaded
通過 chrome 瀏覽器的開發(fā)者工具可以直觀的看到，圖中藍(lán)色的線和藍(lán)色的字使用不同的表現(xiàn)形式表示 DOMContentLoaded 這個(gè)事件觸發(fā)的時(shí)間。
我們先來思考一個(gè)問題，如何衡量一個(gè)網(wǎng)頁的加載速度？
在日常生活中，很多時(shí)候因?yàn)榫W(wǎng)絡(luò)原因我們并不需要等待網(wǎng)頁上的所有內(nèi)容都加載完畢，而是只需要加載主要內(nèi)容即可，比如你打開這篇博客時(shí)，可能并不需要等待所有圖片都加載完成，而是看到博客的正文就可以正常閱讀。也就是說，用戶有時(shí)候只需要在空白的網(wǎng)頁上看見內(nèi)容就可以，而不需要等待所有內(nèi)容都加載出來。
那么如何衡量“計(jì)算這個(gè)網(wǎng)頁從空白到出現(xiàn)內(nèi)容所花費(fèi)的時(shí)間”呢？HTML5 規(guī)范已經(jīng)幫我們完成相應(yīng)的工作，即當(dāng)一個(gè) HTML 文檔被加載和解析完成后，DOMContentLoaded 事件便會(huì)被觸發(fā)。
瀏覽器向服務(wù)器請(qǐng)求到 HTML 文檔后便開始解析（其產(chǎn)物是 DOM），到這里 HTML 文檔就可以說是被加載和解析完成，同時(shí)如果有 CSS 文件則會(huì)根據(jù) CSS 生成 CSSOM，然后再合并 DOM 和 CSSOM 生成渲染樹，至此我們已經(jīng)知道所有節(jié)點(diǎn)的樣式，下面便根據(jù)這些節(jié)點(diǎn)以及樣式計(jì)算它們在瀏覽器中確切的大小和位置（即布局階段），最后得到以上這些信息后，就可以把節(jié)點(diǎn)繪制到瀏覽器上。
下面我們要加入考慮 JavaScript：JavaScript 可以阻塞 DOM 的生成，也就是說當(dāng)瀏覽器在解析 HTML 文檔時(shí)，如果遇到（同步）腳本則停止解析，先去加載腳本并執(zhí)行，執(zhí)行結(jié)束后繼續(xù)解析 HTML 文檔。
defer當(dāng) HTML 文檔被解析時(shí)如果遇到 defer 腳本，則在后臺(tái)加載腳本，文檔解析過程不中斷，等待文檔解析結(jié)束之后，defer 腳本執(zhí)行。
另外，defer 腳本的執(zhí)行順序與定義時(shí)的位置有關(guān)。
如果 script 標(biāo)簽中包含 defer，那么這一塊腳本將不會(huì)影響 HTML 文檔的解析，而是等到 HTML 解析完成后才會(huì)執(zhí)行，而 DOMContentLoaded 只有在 defer 腳本執(zhí)行結(jié)束后才會(huì)被觸發(fā)。asyncHTML 文檔解析不受影響，等 DOM 構(gòu)建完成之后 defer 腳本執(zhí)行，但腳本執(zhí)行之前需要等待 CSSOM 構(gòu)建完成，在 DOM & CSSOM 構(gòu)建完畢，defer 腳本執(zhí)行完成之后，DOMContentLoaded 事件觸發(fā)。
當(dāng) HTML 文檔被解析時(shí)如果遇到 async 腳本，則在后臺(tái)加載腳本，文檔解析過程不中斷，腳本加載完成后，文檔停止解析并執(zhí)行腳本，執(zhí)行結(jié)束后文檔繼續(xù)解析。
當(dāng)腳本下載完后立即執(zhí)行，執(zhí)行順序不確定。
如果 script 標(biāo)簽中包含 async，則 HTML 文檔構(gòu)建不受影響，解析完畢后 DOMContentLoaded 觸發(fā)，而不需要等待 async 腳本執(zhí)行、樣式表加載等。其他
我們在 jQuery 中經(jīng)常使用的 $(document).ready(function() { // ...代碼... }); 其實(shí)監(jiān)聽的就是 DOMContentLoaded 事件
如果 script 無 src 屬性，則 defer, async 會(huì)被忽略
動(dòng)態(tài)添加的 script 標(biāo)簽隱含 async 屬性
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/93062.html
摘要：當(dāng)這些異步任務(wù)發(fā)生的時(shí)候，它們將會(huì)被放入瀏覽器的事件任務(wù)隊(duì)列中去，等到運(yùn)行時(shí)執(zhí)行線程空閑時(shí)候才會(huì)按照隊(duì)列先進(jìn)先出的原則被一一執(zhí)行，但終究還是單線程。 瀏覽器是多進(jìn)程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser進(jìn)程： 瀏覽器的主進(jìn)程（負(fù)責(zé)協(xié)調(diào)、主控），只有一個(gè)。 負(fù)...
摘要：當(dāng)這些異步任務(wù)發(fā)生的時(shí)候，它們將會(huì)被放入瀏覽器的事件任務(wù)隊(duì)列中去，等到運(yùn)行時(shí)執(zhí)行線程空閑時(shí)候才會(huì)按照隊(duì)列先進(jìn)先出的原則被一一執(zhí)行，但終究還是單線程。 瀏覽器是多進(jìn)程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser進(jìn)程： 瀏覽器的主進(jìn)程（負(fù)責(zé)協(xié)調(diào)、主控），只有一個(gè)。 負(fù)...
對(duì)python調(diào)用類特性方式詳細(xì)描述檢驗(yàn)前提下類開啟也經(jīng)常需要用到的,下面文中重要給大家介紹了相關(guān)Python類屬性和方法的開啟的相關(guān)資料,從文中根據(jù)實(shí)例編號(hào)介紹的非常詳細(xì),務(wù)必的朋友可以參考一下 Python從技術(shù)的時(shí)候就已經(jīng)已是一類面向?qū)ο笳Z言表述，也正因?yàn)槿绱?，在Python中打造一個(gè)類和對(duì)象是非常簡單的?！ ∫弧㈩?、總體目標(biāo)概述 在C語言程序設(shè)計(jì)中，把數(shù)據(jù)和信息以及對(duì)業(yè)務(wù)操作流程封...
對(duì)python調(diào)用類特性方法詳細(xì)描述檢驗(yàn)前提下類開啟也經(jīng)常需要用到的,下面文中重要給大家介紹了相關(guān)Python類屬性和方法的開啟的相關(guān)資料,文中依據(jù)案例編號(hào)介紹的非常詳細(xì),務(wù)必的朋友可以參考一下 Python從技術(shù)的時(shí)候就已經(jīng)已是一類面向?qū)ο笳Z言表述，也正因?yàn)槿绱耍赑ython中建立一個(gè)類和對(duì)象是非常簡單的。 一、類、對(duì)方概述 在編程設(shè)計(jì)設(shè)計(jì)中，把數(shù)據(jù)和信息以及對(duì)業(yè)務(wù)操作過程封裝類型在...
摘要：標(biāo)簽加載順序如果要談標(biāo)簽加載順序問題，首先要談的就是標(biāo)簽的位置，因?yàn)闃?biāo)簽的位置對(duì)于加載順序來說有著很重要的影響。例如標(biāo)簽在以上代碼中，可能由于下載時(shí)間比較長，由于兩個(gè)標(biāo)簽都是異步執(zhí)行，互不干擾，因此可能就會(huì)先于執(zhí)行。 談?wù)? 標(biāo)簽加載順序的問題 這篇文章比較長，如果你耐心讀完了，我會(huì)感謝你愿意在這篇文章上花費(fèi)時(shí)間，也希望你有收獲。 其實(shí)說起，幾乎搞前端的都知道他的作用：引入 JavaS...
閱讀 1580·2021-09-26 09:46
閱讀 2665·2021-09-07 09:59
閱讀 2750·2021-09-07 09:59
閱讀 1856·2019-08-30 14:20
閱讀 922·2019-08-26 13:39
閱讀 3174·2019-08-26 12:24
閱讀 771·2019-08-26 11:55
閱讀 1212·2019-08-23 16:49
