[Javascript]HTML5中script的async屬性非同步載入JS

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，那麼指令碼會立即執行，頁面會在指令碼執行完畢繼續解析。