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. 通過將async <script>設置為true的<script>添加，然后在<script>聲明一個變量，降低啄食順序，這是變量在第一個變量中是否可用的競爭條件。

   如果第一個<script>被緩存，或者第二個<script>的執行被延遲（即第一個/第二個之間的元素是同步的並且加載緩慢），那么最終將變量未定義。

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

在這兩種情況下，您可以在事件處理程序中包含腳本中包含的JavaScript代碼，這些事件處理程序正在偵聽諸如window.onload或DOMContentLoaded事件之類的事件，以延遲執行直到這些事件被觸發（並且所有<scripts>將存在且正確）。