[HTML]script 新增 async 和 defer 二個屬性說明
在今日 Javascript 是網頁設計不可或缺的技術，引用外部 Javascript 檔，也是避免不了的技巧。
以往引用外部 Javascript 檔，由於實在是太常引用，一般我們直接會使用這樣的寫法：
<script type="text/javascript" src="demo.js"></scrpt>
或
<script src="demo.js"></scrpt>
但最近卻發現很多網頁引用的語法是
<script async src="demo.js"></scrpt>
或是也有出現， 這樣的寫法
<script defer src="demo.js"></scrpt>
一般人應該不容易注意到這四種寫法的差別吧！
我們今天就詳細的說明一下，到底這四種引用外部 Javascript 檔案的差別在哪裡
首先最早期引用外部 Javascript 檔案的標準定義寫法是
<script type="text/javascript" src="demo.js"></scrpt>
整個網頁的繪製會停下，等 demo.js 下載完並執行完，網頁繪製才繼續。
這個代表，在網頁遇到此語法時，並下載後會先執行，執行完這支 Javascript 檔案後，網頁才會繼續繪製下去。
如果遇到這支 Javascript 檔案很大或是要執行不少時間，網頁就會讓人覺得卡卡的。
所以也很多前端網頁程式設計師，會將引用外部 Javascript 檔案，放在網頁的最後面，而不是放在<head></head>裡面，避免造成下載顯示網頁畫面花費太久的時間！另外，<head></head>區段通常也是做為編碼宣告
另外，也有很多人直接省略屬性 type="text/javascript"，直接寫成<script src="demo.js"></scrpt>
script 標籤屬性 type="text/javascript"是 HTML 4.01 和 XHTML 1.0 標準的定義，根據需要指定屬性
目前常用的瀏覽器，當沒有寫屬性時，預設會自動使用 JavaScript。
HTML5 中，也定義了 type 預設值為 text/javascript，所以一般而言，現在直接使用<script>就可以了。
嵌入的位置可以在<head>和<body>之中的任意位置，就看你選擇適當的區段。
接著，我們介紹 HTML5 新增定義的屬性 async, defer
● async 屬性
<script async src="demo.js"></scrpt>
網頁繪製不會停下， demo.js 在背景下載。待 demo.js 下載完畢，網頁繪製停下，執行 demo.js 。待 demo.js 執行完畢，網頁繪製繼續。
當網頁遇到後，下載後再先執行，但執行這支 Javascript 檔案的同時，也繼續載入網頁以及執行其他的 Javascript。
這支 Javascript 檔案和其他的 Javascript 檔案無連帶關係，不需要等待其他的 Javascript 檔案執行完。
目前支援 HTML5 的所有瀏覽器，都支援這個新的 script 屬性語法。
● defer 屬性
<script defer src="demo.js"></scrpt>
網頁繪製不會停下， demo.js 在背景下載，待 DOMContentLoaded 再執行 demo.js 。
要等待整個網頁都下載及分析完成後才會執行，非常類似於把 Javascript 檔案放在頁尾的情況。
這支 Javascript 檔案一定要等網頁全部都繪製完後才能執行。
目前支援 HTML5 的所有瀏覽器，都支援這個新的 script 屬性語法。
● async + defer 屬性
<script async defer src="demo.js"></scrpt>
等待整個網頁都下載及分析完成後，才會非同步執行這支 Javascript 檔案後面剩下的部分。
不知道，以上的說明，有沒有讓你更清楚
- Top