在document.ready內部使用async = true時會發生什么？

Question

當我們在document.ready內部調用屬性為async="true"的javascript時，會發生什么情況。 例如，

$(document).ready(function() {
var ma = document.createElement('script');
ma.type = 'text/javascript'; 
ma.async = true;
ma.src = 'test.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ma,s);
});

$(document).ready腳本將在加載DOM后立即執行。 如果我們在其中調用async = true來執行腳本，會發生什么情況？ 將在DOM准備就緒之前加載test.js嗎？

Answer 1

通過DOM操作添加的腳本與添加它們的JavaScript 不同步 ，而與async屬性無關。

在初始HTML（在“就緒”之前）或添加多個腳本元素且執行順序必須與DOM插入順序匹配的腳本中， async屬性在初始HTML中存在的腳本中扮演着更大的角色：

設置此布爾值屬性以指示瀏覽器應盡可能異步執行腳本。

..插入腳本的腳本在IE和WebKit中異步執行，但是在Opera和4.0之前的Firefox中同步[寫入腳本元素的插入順序]。 ..要請求插入腳本的外部腳本在瀏覽器[..]中按插入順序執行，請在要維護順序的腳本上設置async=false 。

瀏覽器將“在將該元素添加到DOM后的某個時候”開始加載新腳本元素引用的腳本，並且引用的腳本僅在加載后執行。 但是， insertBefore 立即返回，並且不能保證已加載引用的腳本- async設置為什么都無所謂。

---

在這種情況下，保證test.js代碼僅在“添加腳本元素之后的某個時刻”運行到DOM中-自然地，這必須在調用ready函數之后才進行 ，這是添加元素的地方。

由於瀏覽器具有單個執行上下文，並且添加DOM元素是異步操作（寫入正在執行的外部腳本），因此這也意味着test.js中的代碼僅在“ ready函數結束后的某個時間 ”運行。 並且，在響應“ DOM ready”而調用ready函數之前，不會啟動（或結束）函數。

將async標志設置為任何值都不會更改上述內容。