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. trueに設定asyncと<script>を追加し、序列ダウン<script>下で変数を宣言することで、それは変数が最初に利用可能であるかどうかの競合状態です。

   最初の<script>がキャッシュされている場合、または2番目の<script>の実行が遅れている場合（つまり、1番目と2番目の要素が同期して読み込みが遅い場合）、変数は未定義になります。

2. <script>は、DOM内の位置よりも早く実行されないことを保証できます。 <div>がの前に配置され、の前に<script>の場合、は常にになります。そうでなければストローを引っ張る。あなたはこれらのイベントが発火するまで実行を遅延するために、このようなwindow.onloadやDOMContentLoadedイベントとしてイベントをリスニングしているイベントハンドラ内のスクリプト内に含まれたJavaScriptコードをラップ（およびすべてのことができ、これらの状況の

で

両方<scripts>が表示されます）。