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