沐鳴平台網址_淺析script標籤的async和defer屬性

前端當然要從 html 開始,我們來聊聊在 script 標籤中加上 async/defer 時的功能及差異。

都明白的道理

我們都知道,瀏覽器解析 html 是一行一行按照順序向後讀取的,在傳統的寫法中,當瀏覽器讀到 <script> 時,便會暫停解析 DOM,同時立即開始下載 <script> 中定義的資源,並在下載完成后立刻執行。由於這樣的特性,可能會造成 DOM 樹在還沒有完全解析時就開始執行 JavaScript,需要操作 DOM 的程序可能因此無法正確執行,從而造成許多問題;或是由於 <script> 中的資源下載、執行時間過程,用戶會卡在白畫面,並會產生覺得網站太慢不好用之類的體驗。

而解決方法也很簡單,我們需要把 <script> 標籤的位置都放到 <body> 的最後一行來避免 DOM 樹解析不完全的問題,但是在複雜的網站中, HTML、JavaScript 的個頭都很大,需要等到整個 DOM 樹都載入完成才開始下載 <script> 內的資源,從網站讀取完成到可操作,會產生明顯的延遲感。

那這種問題該怎麼解決呢?

從HTML4 開始,<script> 多了 defer 屬性,而 HTML5 則多了 async,兩者都是用來幫助開發者控制 <script> 內資源的載入及執行順序,以及避免 DOM 的解析被資源下載卡住的。


defer

defer 的意思是延遲(Deferred),在 HTML4.01 規範 中規定:

設置后,這個布爾屬性會向用戶代理提示該腳本將不會生成任何網頁內容(例如,JavaScript中不會生成 “document.write”),因此,用戶代理可以繼續解析和渲染。

也就是說,在加上 defer 屬性后,瀏覽器會繼續解析、渲染畫面,而不會因為需要載入<script> 內的資源而卡住;實際執行時,會在 DOMContentLoaded 執行之前,由上到下的依照擺放順序觸發。

聽起來很方便對吧?但要提醒各位,雖然 W3C 規範上說 defer 屬性會是一個布爾值,但 IE9 以前的版本是自定義的,即使寫成 <script defer=”false”> 仍然會有 defer 的效果,使用時要特別注意。

又是你這個老不死的 IE……

async

async 的意思是異步(Asynchronous),在 HTML5 規範 中規定:

…如果存在 async 屬性,則腳本將會在可用時立即異步執行 …

在 <script> 標籤中加上 async 屬性后,與defer 的相同點是也會在後台執行下載,但不同的是當下載完成會馬上暫停 DOM 解析(如果還沒有解析完成的話),並開始執行 JavaScript。因為下載完成後會立即執行,加上 async 屬性后,就無法保證執行順序了。

這個屬性在標準中,同時也支持通過 JavaScript 動態插入 <script> 的情況。例如:

const script = document.createElement('script')
script.src = "/something/awesome.js"
document.body.append(script)

動態創建的 <script>,默認就是異步載入;但可以通過設定屬性將它關閉:

script.async = false

type=”module”

在主流的現代瀏覽器中,<script> 的屬性可以加上 type=”module”。這時瀏覽器會認為這個文件是一個JavaScript 模塊,其中的解析規則、執行環境會略有不同;這時 <script> 的默認行為會像是 defer 一樣,在後台下載,並且等待 DOM 解析、渲染完成之後才會執行,所以 defer 屬性無法在 type=”module” 的情況下發生作用。但同樣可以通過 async 屬性使它在下載完成后即刻執行。

用法

現在你應該明白這兩個屬性的特點了,那麼該怎樣正確地使用呢?

defer 由於後台載入、不打斷渲染及確保執行順序的特點,基本上在沒特殊需求的情況下,在 <script> 中設置一下就行了;當然 <script> 本身的擺放順序還是要稍微留心一下。

async 比較特別,因為在下載後會立刻執行,且不保證執行順序,一般常見的應用是設定在完全獨立的小小模塊中,例如背景Logo、頁面廣告等,在避免造成使用者體驗變差的同時,盡量早的產生效果。

現在前端開發大都通過 webpack 等打包工具來輔助處理,很少有自己設定這些屬性的機會;開發者可以通過 script-ext-html-webpack-plugin 等插件的幫助,將切分好的 Chunk 設定個別需要的 <script> 屬性。

總結

async 及 defer 是 <script> 專屬的屬性,對於網頁中的其他資源,可以通過 <link> 的preload、prefetch 屬性,來幫我們延遲加載 未來才需要用到的資源。

雖然 <script> 的async、defer 這些屬性的設置大都已經包含在現代框架的打包流程中了,但只有紮實的認識這些網頁最基礎的規範,才能明白自己寫出來的代碼最後會產生什麼效果。

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/9829