<script>屬性async和defer的區別
async：可選。表示應該立即下載指令碼，但不應妨礙頁面中的其他操作，比如下載其他資源或 等待載入其他指令碼。只對外部指令碼檔案有效。
defer：可選。表示指令碼可以延遲到文件完全被解析和顯示之後再執行。只對外部指令碼檔案有 效。IE7 及更早版本對嵌入指令碼也支援這個屬性。
延遲指令碼defer
HTML 4.01 為<script>標籤定義了 defer 屬性。這個屬性的用途是表明指令碼在執行時不會影響頁面的構造。也就是說，指令碼會被延遲到整個頁面都解析完畢後再執行。因此，在<script>元素中設定defer 屬性，相當於告訴瀏覽器立即下載，但延遲執行。
<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <script type="text/javascript" defer="defer" src="example1.js"></script> <script type="text/javascript" defer="defer" src="example2.js"></script> </head> <body> <!-- 這裡放內容 --> </body> </html>
在這個例子中，雖然我們把<script>元素放在了文件的<head>元素中，但其中包含的指令碼將延遲到瀏覽器遇到</html>標籤後再執行。HTML5 規範要求指令碼按照它們出現的先後順序執行，因此第一個延遲指令碼會先於第二個延遲指令碼執行，而這兩個指令碼會先於 DOMContentLoaded 事件執行。在現實當中，延遲指令碼並不一定會按照順序執行，也不一定會在 DOMContentLoaded 事件觸發前執行，因此最好只包含一個延遲指令碼。
前面提到過，defer 屬性只適用於外部指令碼檔案。這一點在 HTML5 中已經明確規定，因此支援HTML5 的實現會忽略給嵌入指令碼設定的 defer 屬性。IE4～IE7 還支援對嵌入指令碼的 defer 屬性，但IE8 及之後版本則完全支援 HTML5 規定的行為。IE4、Firefox 3.5、Safari 5 和 Chrome 是最早支援 defer 屬性的瀏覽器。其他瀏覽器會忽略這個屬性，像平常一樣處理指令碼。為此，把延遲指令碼放在頁面底部仍然是最佳選擇。
非同步指令碼async
HTML5 為<script>元素定義了 async 屬性。這個屬性與 defer 屬性類似，都用於改變處理指令碼的行為。同樣與 defer 類似，async 只適用於外部指令碼檔案，並告訴瀏覽器立即下載檔案。但與 defer 不同的是，標記為 async 的指令碼並不保證按照指定它們的先後順序執行。例如：
<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <script type="text/javascript" async src="example1.js"></script> <script type="text/javascript" async src="example2.js"></script> </head> <body> <!-- 這裡放內容 --> </body> </html>
在以上程式碼中，第二個指令碼檔案可能會在第一個指令碼檔案之前執行。因此，確保兩者之間互不依賴 非常重要。指定 async 屬性的目的是不讓頁面等待兩個指令碼下載和執行，從而非同步載入頁面其他內容。 為此，建議非同步指令碼不要在載入期間修改 DOM。 非同步指令碼一定會在頁面的 load 事件前執行，但可能會在 DOMContentLoaded 事件觸發之前或之 後執行。支援非同步指令碼的瀏覽器有 Firefox 3.6、Safari 5 和 Chrome。
摘自：高程三