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); 
}); 

在加載DOM後立即執行$(document).ready內的腳本。如果我們將async = true用於在腳本中調用腳本，會發生什麼？ DOM準備好之前會加載test.js？

Answer 1

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

的async attribute起着腳本更大的作用存在於初始HTML - 前「準備」 - 或當多個腳本元素添加和執行順序必須與DOM的插入順序一致：

套裝此布爾屬性來指示瀏覽器應該，如果可能，執行異步腳本..

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

瀏覽器將開始加載由新引用的腳本腳本元素「在元素添加到DOM之後的某個點」，並且引用的腳本只會在加載後執行一次。但是，insertBefore立即返回和引用的腳本是不是保證被加載 - 無所謂async設置爲什麼。

---

在這種情況下，test.js代碼是「在某些時候後的腳本元素添加」到DOM保證只跑 - 這自然必須準備函數被調用後，這是添加元素的地方。

因爲瀏覽器具有單個執行上下文，並添加DOM元素是一個異步操作（WRT外部腳本被執行），這也意味着在test.js代碼將僅運行「在一些後就緒功能結束「。而且，ready函數在響應「DOM ready」被調用之前不會開始（或結束）。

設置async標誌（任何值）不會改變上述內容。