HTML5中script的async屬性異步加載JS

HTML4.01爲script標籤定義了5個屬性:

charset 可選。指定src引入代碼的字符集,大多數瀏覽器忽略該值。
defer 可選。延遲腳本執行,相當於將script標籤放入頁面body標籤的底部。除IE和較新版本的Firefox外,其他瀏覽器並未支持。
language 已廢棄。大部分瀏覽器會忽略該值。
src 可選。指定引入的外部代碼文件,不限制後綴名。
type 必選。指定腳本的內容類型(MIME類型)。現實中通常不指定該值也可以,瀏覽器會默認當作text/javascript類型來解釋執行。
HTML5中的script屬性

script標籤在HTML5中除了具備HTML5標準屬性以外,與HTML4.01相比移除了language屬性,修改了type屬性爲可選的(默認text/javascript),並新增了一個屬性async。

async屬性的作用

定義腳本是否異步執行,取值true或false。

async如果指定爲true,腳本會在頁面渲染顯示的過程中解析執行(瀏覽器會判斷該腳本是否處於可用狀態),這是一個很有意思也很實用的功能。

現在的script是怎樣的?

1、把它放在head標籤內。在下載script引入的外部腳本時,瀏覽器處於阻塞狀態,網絡不好或者script文件過大時,頁面處於空白停頓狀態,體驗是並不夠好。

2、把它放入頁面底部。這是大家公認的提高前端頁面性能和體驗的方法,但還是存在一定的問題,放在頁面底部的腳本是要等到頁面文檔流下載完畢纔去下載、執行,頁面中的交互會存在一個延遲的時間去實現。雖然頁面顯示時間變短了,但交互卻被延後了。體驗也不夠好。

3、按需執行。在head標籤內引入部分公共腳本,在每一個需要交互的HTML元素之後插入script立即執行,需要特定條件才執行的腳本放到頁面最底部。這也不是一個完美的解決方案,一則頁面內穿插過多的script標籤引起維護不便,二來底部腳本還未加載完時用戶便觸發了某個條件該怎麼辦?雖有方法實現,但體驗仍不夠好。

支持async屬性之後改變了什麼?

async屬性就是解決上面這些問題的,這樣我們就可以在head標籤內插入script,腳本與文檔同時下載,腳本、文檔可用時便執行。

async與defer

摘抄HTML5手冊的解釋,很好理解:

如果 async 屬性爲 true,則腳本會相對於文檔的其餘部分異步執行,這樣腳本會可以在頁面繼續解析的過程中來執行。

如果 async 屬性爲 false,而 defer 屬性爲 true,則腳本會在頁面完成解析時得到執行。

如果 async 和 defer 屬性均爲 false,那麼腳本會立即執行,頁面會在腳本執行完畢繼續解析。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章