script 標籤的 defer 與 async

時間 2019-11-10

標籤 script 標籤 defer async 简体版

原文原文鏈接

各自的特色

defer：延遲腳本html

當即下載。不影響其餘操做，以下載其餘資源，HTML解析。
延遲執行。將延遲到整個頁面都解析完畢後再運行，也就是到瀏覽器遇到</html>標籤後再執行。
理論按順序執行，實際不是。HTML5 規範要求腳本按照它們出現的前後順序執行，而且會在 DOMContentLoaded 事件觸發前執行。可是，在現實中，延遲腳本並不必定會按照順序執行，也不必定會在 DOMContentLoaded 事件觸發前執行。（《JavaScript高級程序設計》（第三版））
最好只包含一個延遲腳本。
IE<=9時支持但會有bug

async: 異步腳本segmentfault

當即下載。不影響其餘操做，以下載其餘資源，HTML解析。
當即執行。下載完既執行，暫停HTML解析。
不肯定順序執行。必定會在頁面的 load 事件前執行，但不肯定在 DOMContentLoaded 事件觸發先後執行。
建議異步腳本不要在加載期間修改DOM
IE<=9時不支持

src : 可選表示包含要執行代碼的外部文件。瀏覽器

外部JavaScript文件的.js擴展名不是必需的，由於瀏覽器不會檢查包含JavaScript的文件的擴展名。若是不使用.js擴展名，請確保服務器能返回正確的MIME類型。
帶有src屬性的<script>元素內的代碼會被忽略。

特殊操做

同時使用defer和async。瀏覽器會忽視defer屬性,按照async執行。

比較

引用segmentfault一個答案的一張圖
服務器

結論

平常開發中就都放在<body>底部。
對於徹底獨立的腳原本纔去使用async。例如：Google Analytics

相關文章

相關標籤/搜索

PHP 7 新特性

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<