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="https://www.cnblogs.com/jiajialove/p/example1.js"></script> <script type="text/javascript" defer="defer" src="https://www.cnblogs.com/jiajialove/p/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="https://www.cnblogs.com/jiajialove/p/example1.js"></script> <script type="text/javascript" async src="https://www.cnblogs.com/jiajialove/p/example2.js"></script> </head> <body> <!-- 這里放內容 --> </body> </html>
在以上代碼中，第二個腳本檔案可能會在第一個腳本檔案之前執行，因此，確保兩者之間互不依賴 非常重要，指定 async 屬性的目的是不讓頁面等待兩個腳本下載和執行，從而異步加載頁面其他內容， 為此，建議異步腳本不要在加載期間修改 DOM， 異步腳本一定會在頁面的 load 事件前執行，但可能會在 DOMContentLoaded 事件觸發之前或之 后執行，支持異步腳本的瀏覽器有 Firefox 3.6、Safari 5 和 Chrome，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/176004.html
標籤：JavaScript
上一篇：除錯webpack