總結前端開發模式和規範 二、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是怎樣的？

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

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

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

支持async屬性以後改變了什麼？

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

async與defer

摘抄HTML5手冊的解釋，很好理解：

若是 async 屬性爲 true，則腳本會相對於文檔的其他部分異步執行，這樣腳本會能夠在頁面繼續解析的過程當中來執行。

若是 async 屬性爲 false，而 defer 屬性爲 true，則腳本會在頁面完成解析時獲得執行。

若是 async 和 defer 屬性均爲 false，那麼腳本會當即執行，頁面會在腳本執行完畢繼續解析。