摘要:如果我們為外部添加或屬性,那么它的下載就不會阻塞其他內容的加載關于與屬性的區別,請參考我的另一篇文章高級程序設計讀書筆記在中使用
在地址欄輸入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文件仍在下載的過程中,已經可以打印出兩個
如果我們執行以下代碼,首先加載外部Javascript文件,然后加載DOM其他內容:
Hello World
如我們所料,文件沒有下載并執行完畢,Hello World是不會打印出來的。
如果我們為外部Javascript添加defer或async屬性,那么它的下載就不會阻塞DOM其他內容的加載:
Hello World
關于defer與async屬性的區別,請參考我的另一篇文章:
Javascript高級程序設計讀書筆記——在HTML中使用Javascript
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94882.html
摘要:瀏覽器的預解析可以減緩渲染被阻塞的情況,例如文檔解析過程中預加載器發現了標簽,會對文件進行加載并放在瀏覽器緩存中,這樣當解析器遇到這個標記時,由于預加載器已經將文件加載下來了,所以會被立即執行,不需要等待從網絡抓取資源,減緩了對渲染的阻塞。 參考資料 瀏覽器的工作原理 瀏覽器加載網頁時的過程是什么? HTML渲染過程詳解 瀏覽器的工作原理 一、瀏覽器的高層結構 瀏覽器的主要組件為:...
摘要:瀏覽器的預解析可以減緩渲染被阻塞的情況,例如文檔解析過程中預加載器發現了標簽,會對文件進行加載并放在瀏覽器緩存中,這樣當解析器遇到這個標記時,由于預加載器已經將文件加載下來了,所以會被立即執行,不需要等待從網絡抓取資源,減緩了對渲染的阻塞。 參考資料 瀏覽器的工作原理 瀏覽器加載網頁時的過程是什么? HTML渲染過程詳解 瀏覽器的工作原理 一、瀏覽器的高層結構 瀏覽器的主要組件為:...
摘要:瀏覽器的預解析可以減緩渲染被阻塞的情況,例如文檔解析過程中預加載器發現了標簽,會對文件進行加載并放在瀏覽器緩存中,這樣當解析器遇到這個標記時,由于預加載器已經將文件加載下來了,所以會被立即執行,不需要等待從網絡抓取資源,減緩了對渲染的阻塞。 參考資料 瀏覽器的工作原理 瀏覽器加載網頁時的過程是什么? HTML渲染過程詳解 瀏覽器的工作原理 一、瀏覽器的高層結構 瀏覽器的主要組件為:...
閱讀 3189·2021-11-24 10:30
閱讀 1313·2021-09-30 09:56
閱讀 2385·2021-09-07 10:20
閱讀 2597·2021-08-27 13:10
閱讀 698·2019-08-30 11:11
閱讀 2051·2019-08-29 12:13
閱讀 758·2019-08-26 12:24
閱讀 2897·2019-08-26 12:20