[英]<script defer> and $(document).ready
根據http://caniuse.com/script-defer ，大多數瀏覽器都支持script標簽的defer屬性。
我想知道<script defer src="...">指定的<script defer src="...">是否在 jQuery 的$(document).ready()之前或之后執行？ 主要的現代瀏覽器（Chrome、Firefox、IE 等）在執行順序上是一致的還是有所不同？
基於此小提琴我不得不說 jQuery 的$(document).ready()在使用defer聲明的腳本之后執行。 我用 Firefox 和 Chrome 對其進行了測試，它們的行為與腳本順序無關。
我猜其他瀏覽器上的行為可能會根據它們的實現而改變，所以它總是不確定的。
編輯：事實證明， defer屬性應該與外部 javascript 文件一起使用。 我編輯了小提琴以顯示這一點，顯然結果相同。
在這里更新小提琴： http : //jsfiddle.net/RNEZH/15/
defer 屬性有很好的寫作和分析。 另請參閱帖子的評論以獲取有關如何在 HTML5 中重新定義defer其他信息。
我的結論是： defer太依賴瀏覽器了，不能指望。 因此使用 jQuery doc ready 技術。
換句話說，jQuery 的一個重要原因是為了覆蓋瀏覽器的不一致。 Defer 是另一個這樣的不一致，對於寫得好的頁面應該避免。
簡單地說，無論是否使用defer ， script都應該在$(document).ready()之前執行，幾乎所有主流瀏覽器都支持defer 。
但為了安全起見，我鼓勵您同時使用$(document).ready()和defer 。 那么為什么要defer呢？ 因為它有助於頁面快速顯示（因為外部腳本是並行加載的）並且是 Google 頁面速度工具中非常重要的一個因素，所以可以在這里找到一個很好的細節http://code.google.com/speed/page-speed/docs/ payload.html#DeferLoadingJS
要延遲內聯 javscript，您可以使用 type="module" 然后使 $(document).ready() 變得多余。
<script type="module">alert('defered inline js')</script>
因為 type="module" 意味着延遲腳本將與其他延遲腳本按順序執行。
看看我能否在 2020 年 9 月使用 92% 的瀏覽器支持。https://caniuse.com/es6-module
我在 Chrome (88.0.4324.96) 上觀察到 jQuery 3.0 之前版本的競爭條件。 我在 Safari 和 Firefox 上都看不到這個。
<body>
<script defer src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script defer src="test.js"></script>
</body>
測試.js：
jQuery(document).ready(function ($) {
console.log('jQuery version', $().jquery);
console.log(a);
});
const a = 'OK';
根據我的經驗，大約 10% 的時間在Cannot access 'a' before initialization這會因Cannot access 'a' before initialization失敗。
一旦我升級到 jQuery 3，我就無法重現。 由於這是一個競爭條件，我不能 100% 確定，但對我來說似乎很確定。
在 $(document).ready() 之后將“defer”添加到新的腳本標簽有什么好處嗎？
[英]Is there any advantage to add 'defer' to a new script tag after $(document).ready()?
從外部腳本延遲/延遲document.write直到文檔准備就緒
[英]Delay/defer document.write from an external script till after document ready
使用窗口onload或准備就緒的文檔推遲圖像以提高Pagespeed Scpre
[英]Defer images using window onload or document ready to improve pagespeed scpre
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.