JavaScript ファイルの同期読み込みと非同期読み込みの実装原則

HTML 4.01 スクリプト属性
charset: オプション。 src によって導入されるコードの文字セットを指定します。ほとんどのブラウザはこの値を無視します。
defer: ブール値、オプション。スクリプトの実行を遅らせることは、ページの body タグの下部に script タグを配置することと同じであり、js スクリプトはドキュメントの DOMContentLoaded の前に実行されます。 IE および Firefox の新しいバージョンを除き、他のブラウザはサポートされていません。
言語: 非推奨になりました。ほとんどのブラウザはこの値を無視します。
src: オプション。サフィックス名を制限せずにインポートする外部コードファイルを指定します。
タイプ: 必須。スクリプトのコンテンツタイプ（MIMEタイプ）を指定します。実際には、通常、この値を指定する必要はありません。ブラウザはデフォルトで text/javascript タイプとして解釈して実行します。 HTML5 の

script 属性 : 新しい HTML5 標準で定義された属性に加えて、HTML5 の
script タグは、HTML4.01 と比較して language 属性を削除して変更しました。 type 属性はオプション (デフォルトは text/javascript) で、新しい属性 async が追加されます。
async: 属性の役割であるブール値は、スクリプトが非同期で実行されるかどうかを定義します。値は true または false です。
async が true に設定されている場合、defer 属性は無視されます。
非同期で実行される js ファイルは、読み込むドキュメントにコンテンツを書き込むために document.write() を使用しないと想定されているため、非同期で実行される js ファイルの読み込みおよび実行中に document.write() を使用しないでください。
例外は次のとおりですscript タグ属性に追加すると、ページが js ファイルを導入する方法がその読み込みと実行モードに影響します。
スクリプトノード (appendChild(scriptNode) など) を追加することによって導入されたすべての js ファイルは非同期で実行されます (scriptNode を挿入する必要があります)ノードを作成して src を設定するだけでは、js ファイルはロードされません。これは、img のプリロードとは異なります)
HTML ファイルの <script> タグ内のコードまたは js 内のコードsrc によって参照されるファイルは同期的にロードされ、実行された <br>html ファイルの <script> タグ内のコードは、 document.write() メソッドを使用して、<script&gt の src 属性によって参照される js ファイルを導入します。非同期的に実行される <BR>html ファイル内の ; タグ。 js ファイルのコード内で document.write() メソッドを使用して導入された js ファイルが同期的に実行されます。 <BR>Image オブジェクトを使用して、js ファイルを非同期的にプリロードします (実行されません) <br><br>次のようなものは使用しないでください。このメソッドは、js ファイルをロードするリクエストを開始しません: <BR>divNode.innerHTML = '<script src="xxx.js"&gt ;</script>';
window.onload イベントは、ファイルがロードされた後にのみ実行されます (非同期でロードされた場合でも)
============ ===========================================
1. ><script> <br>// 実行されたコードを同期的にロードします <br></script>
2.
xx.js
3.
<script><BR>document.write('<script src="xx.js"></script>'); のコードを同期的にロードして実行します。 //xx.js

4,

xx のコードを非同期的にロードして実行します。 js には次のコードが含まれています:

コードをコピーコードは次のとおりです:

document.write ('');
document.write('');

その後、xx.js、11.js、および 22.js がすべて同期的に読み込まれ、実行されます。
スクリプトノードの挿入によって xx.js、11.js、および 22.js が非同期的に読み込まれる場合、11.js と 22.js は非同期的に読み込まれます。
スクリプトノードの挿入によって xx.js が非同期的に読み込まれる場合、 11.js と 22.js は document.write(script) モードでロードされ、次に 11.js と 22.js は同期的にロードされます (最新のブラウザーでテストされています。Chrome では、xx.j の非同期ロード実行は行われなくなりました)利用可能な document.write() はコンテンツをドキュメントに書き込みますが、Firefox と IE はドキュメントが閉じる前に書き込むことができます (メソッドは HTML でアラートを使用してドキュメントが閉じないようにします))
テスト: 11 のalert() .js (for ループは使用しないでください。ブラウザは単一のスレッドで実行され、コードの一部の実行を続けると残りのコードがブロックされます)、22.js の console.log()、 22.js のコードがブロックされていることがわかります
5.
次のメソッドでは、appendChild の実行後に xx.js がロードされ、非同期で実行されます

コードをコピーしますコードは次のとおりです:

var script = document.createElement("script");
script.setAttribute("src") ","xx.js");
documentrt.getElementsByTagName("head") [0].appendChild(script);

6. Image オブジェクトを使用して js ファイルを非同期的にプリロードします (実行されません)
リクエストは、イメージの src が割り当てられたときに開始され、ファイルタイプは選択されません (イメージは動的に指定される場合もあります)検証コードなどのスクリプトによって作成されるため、js ファイルの URL を image.src に割り当てることができます。js はロード後にブラウザーによってキャッシュされます。

。コードをコピーコードは次のとおりです:

var img = new Image();
img.onload = function(){alert( 1); }; //返された js ファイル MIME は画像ではないため、onload コールバック関数はトリガーされません
img.src = 'http://localhost/test/loadjs/try.2.js' ;
var s = document.createElement("script");
var h = document.getElementsByTagName("head")[0];
//js
s.src=img を実行します。 src;
h.appendChild(s);

js ファイルをロードする関数:

コードをコピーしますコードは次のとおりです。

varloadJS = function(url,callback){
var head = document.getElementsByTagName('head');
if(head&&head); .length){
head = head[0];
}else{
head = document.body;
var script = document.createElement('script'); >script.src = url;
script.type = "text/javascript";
head.appendChild(script);
script.onload = script.onreadystatechange = function(){
//スクリプトタグ、IE には onreadystatechange イベントがあり、w3c 標準には onload イベントがあります
//これらの readState は IE8 以下用です。W3C 標準のスクリプトタグには onreadystatechange がなく、
//Onload はありません。ファイルが正常にロードされなかった場合に実行されます。
//(!this.readyState) は W3C 標準用です。IE 9 は W3C 標準の onload
if ((!this.readyState) || this.readyState もサポートします。 == "完了" || this.readyState == "ロード済み" ){
callback();
}
}//end onreadystatechange
}

ポイント 4 のテスト (同期読み込み) (アラートを挿入すると、読み込み中のブロックを簡単に確認できます) tryjs .html

コードをコピーコードは次のとおりです:

< ;body>

tryjs

>

コードは次のとおりです: console.log('write begin'); document.write(''); document.write(''); console.log('書き込み完了');

try.1.js

コードをコピー

コードは次のとおりです: console.log('loadjs 1 begin'); console.log('loadjs 1 終了');

try.2.js

コードをコピーします

コードは次のとおりです: console.log('loadjs 2 begin') ; console.log('loadjs 2 が完了しました');
テスト結果 (IE789 ではファイル 2 とファイル 1 のコールバック完了の順序は不明)
IE 7:
ログ: 外部 js コールバックの読み込み IE
ログ: 外部 js コールバックの読み込み IE
ログ：書き込み開始
ログ：書き込み終了
ログ：外部 JS コールバック完了 IE
ログ：ファイル 1 コールバック読み込み IE
ログ：ファイル 2 コールバック読み込み IE
ログ：loadjs 1 開始
ログ:loadjs 1 完了
ログ:loadjs 2 begin
ログ:loadjs 2 完了
ログ:ファイル 2 コールバック完了 IE
ログ:ファイル 1 コールバック完了 IE

IE8:
ログ: 外部 js コールバックのロード IE
ログ: 外部 js コールバックがロードされた IE
ログ: 書き込み開始
ログ: 書き込み終了
ログ: 外部 js コールバック完了 IE
ログ: ファイル 1 コールバックの読み込み IE
ログ: ファイル 2 コールバックの読み込み IE
ログ:loadjs 1 開始
ログ:loadjs 1 終了
ログ:loadjs 2 開始
ログ:loadjs 2 終了
ログ: ファイル 2 コールバック完了 IE
ログ: ファイル 1 コールバック完了 IE

IE9:
ログ: 書き込み開始
ログ: 書き込み完了
ログ: 外部 JS コールバック完了 IE
ログ: ファイル 1 コールバックの読み込み IE
ログ: ファイル 2 コールバックの読み込み IE
ログ:loadjs 1 開始
ログ:loadjs 1 終了
ログ:loadjs 2 開始
ログ:loadjs 2 終了
ログ: ファイル 1 コールバック完了 IE
ログ: ファイル 2 コールバック完了 IE

FIREFOX:
書き込み開始
書き込み完了
IE ではなく外部の JS コールバック
loadjs 1 開始
loadjs 1 終了
ファイル 1 コールバック、IE ではありません
loadjs 2 開始
loadjs 2 終了
ファイル 2 コールバック、IE ではありません

CHROME:
書き込み開始
書き込み完了
IE ではなく外部 js コールバック
loadjs 1 開始
loadjs 1 終了
ファイル 1 コールバック、IE ではありません
loadjs 2 begin
loadjs 2終了した
ファイル 2 コールバック、IE ではありません

JavaScript ファイルの同期読み込みと非同期読み込みの実装原則_JavaScript スキル