HTML加載過程

gaomysion 發布于2019-08-02 10:25 / 1406人閱讀

摘要：如果我們為外部添加或屬性，那么它的下載就不會阻塞其他內容的加載關于與屬性的區別，請參考我的另一篇文章高級程序設計讀書筆記在中使用

在地址欄輸入url，返回html后，瀏覽器開始順序加載并渲染DOM

Body標簽

當瀏覽器遇到body標簽才算真正開始加載并渲染DOM，此時會有以下幾種情況：

DOM元素

瀏覽器遇到dom元素時，正常順序加載，邊加載邊渲染

內聯CSS

當遇到內聯CSS時，瀏覽器繼續加載，但渲染被阻塞，此時會生成新的CSS Rule Tree，生成后重新渲染界面

外聯CSS

當遇到外聯CSS（link標簽），瀏覽器啟一個線程加載css文件，DOM繼續加載但渲染被阻塞

內聯Javascript

當遇到內聯Javascript，瀏覽器開始執行這段腳本，DOM的加載和渲染同時被阻塞（由于JavaScript有可能會更改DOM Tree和Render Tree，因此同時被阻塞）

外聯Javascript

當遇到外聯Javascript，瀏覽器開始下載這段腳本，下載成功后執行它，這整個過程DOM的加載和渲染同時被阻塞

Example

用一個例子解釋一下



  Hello
  
  
  World

在js文件下載的過程中，js后面的元素沒有被加載，也沒有呈現在界面上，說明js文件的下載阻塞了DOM的解析并渲染



  Hello
  
  
  World

在css文件仍在下載的過程中，已經可以打印出兩個，可以看出css文件的加載阻塞了DOM渲染但沒有阻塞DOM加載

defer 與 async

如果我們執行以下代碼，首先加載外部Javascript文件，然后加載DOM其他內容：



  
  Hello World

如我們所料，文件沒有下載并執行完畢，Hello World是不會打印出來的。

如果我們為外部Javascript添加defer或async屬性，那么它的下載就不會阻塞DOM其他內容的加載：



  
  Hello World

關于defer與async屬性的區別，請參考我的另一篇文章：
Javascript高級程序設計讀書筆記——在HTML中使用Javascript

GPU云服務器云服務器類加載過程頁面加載過程 Java類加載過程 html鏈接過程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52338.html

瀏覽器解析渲染HTML文檔的過程

摘要：瀏覽器的預解析可以減緩渲染被阻塞的情況，例如文檔解析過程中預加載器發現了標簽，會對文件進行加載并放在瀏覽器緩存中，這樣當解析器遇到這個標記時，由于預加載器已經將文件加載下來了，所以會被立即執行，不需要等待從網絡抓取資源，減緩了對渲染的阻塞。參考資料瀏覽器的工作原理瀏覽器加載網頁時的過程是什么？ HTML渲染過程詳解瀏覽器的工作原理一、瀏覽器的高層結構瀏覽器的主要組件為：...

warkiz 2019-08-23 16:22 評論0 收藏0
瀏覽器解析渲染HTML文檔的過程

摘要：瀏覽器的預解析可以減緩渲染被阻塞的情況，例如文檔解析過程中預加載器發現了標簽，會對文件進行加載并放在瀏覽器緩存中，這樣當解析器遇到這個標記時，由于預加載器已經將文件加載下來了，所以會被立即執行，不需要等待從網絡抓取資源，減緩了對渲染的阻塞。參考資料瀏覽器的工作原理瀏覽器加載網頁時的過程是什么？ HTML渲染過程詳解瀏覽器的工作原理一、瀏覽器的高層結構瀏覽器的主要組件為：...

davidac 2019-08-02 16:09 評論0 收藏0
瀏覽器解析渲染HTML文檔的過程

摘要：瀏覽器的預解析可以減緩渲染被阻塞的情況，例如文檔解析過程中預加載器發現了標簽，會對文件進行加載并放在瀏覽器緩存中，這樣當解析器遇到這個標記時，由于預加載器已經將文件加載下來了，所以會被立即執行，不需要等待從網絡抓取資源，減緩了對渲染的阻塞。參考資料瀏覽器的工作原理瀏覽器加載網頁時的過程是什么？ HTML渲染過程詳解瀏覽器的工作原理一、瀏覽器的高層結構瀏覽器的主要組件為：...

CoyPan 2019-08-30 15:43 評論0 收藏0
文檔的加載

摘要：完成文檔和所有子資源已完成加載。在中可以使用事件來檢測文檔是否加載完畢在更早的版本中可以通過每隔一段時間執行一次來檢測這一狀態，因為這條代碼在加載完畢之前執行時會拋出錯誤。 Document.readyState Document.readyState 屬性描述了文檔的加載狀態。當readyState的值變化時，document對象上的readystatechange事件將被觸發。 r...

beita 2019-08-21 17:36 評論0 收藏0
HTML加載過程

摘要：如果我們為外部添加或屬性，那么它的下載就不會阻塞其他內容的加載關于與屬性的區別，請參考我的另一篇文章高級程序設計讀書筆記在中使用 showImg(https://segmentfault.com/img/remote/1460000014810622); 在地址欄輸入url，返回html后，瀏覽器開始順序加載并渲染DOM Body標簽當瀏覽器遇到body標簽才算真正開始加載并渲染DO...

honmaple 2019-08-22 17:07 評論0 收藏0