JavaScript異步加載和執行順序

Question

我在尋找更多關於瀏覽器如何執行關於頁面其餘部分的異步樣式腳本的更多信息。

我有如下像這樣的異步加載模式的JS腳本：

var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 

我明白，這是一個非阻塞下載頁面會繼續，而這個下載加載。到現在爲止還挺好。現在讓我稍後說我聲明瞭一些變量：

var x = "something"; 

我的問題是，這個變量可用於我以前加載的腳本？如果我做一個

alert(x); 

在上面的腳本加載，它似乎工作，但我不知道它將永遠如此。還有什麼關於DOM元素。如果有一些DIV後來在頁面：

<div id="myDiv"></div> 

，在我的劇本我做

var div = document.getElementById("myDiv"); 

將這項工作正確

？在我的測試中，這些東西似乎可行，但我不確定是否有更多的頁面內容可供異步腳本看到。

所以我的問題可以基本上縮小到，從一個異步加載的腳本訪問項而不檢查某些DOM加載的事件安全嗎？

Answer 1

1. 通過在<script>低下來啄食順序添加<script>與async設置爲true，然後聲明一個變量，它是一個競爭狀態變量是否在第一個可用的。

   如果第一<script>被高速緩存，或者如果第二<script>的執行被延遲（即，其間第一/第二元件是同步的，加載緩慢），你將結束與該變量是未定義的。

2. 您可以保證<script>的執行時間不會早於它在DOM中的位置。如果<div>定位在之前<script>，它將總是可用。否則拉吸管。

在的這些情況你可以用包含在事件處理程序的腳本，它們監聽事件中的JavaScript代碼都直到這些事件已解僱如window.onload或DOMContentLoaded事件拖延執行（和所有<scripts>將會出現並更正）。