AppendChild(ScriptNode)で導入されたJSファイルは非同期に実行されます(ScriptNodeをドキュメントに挿入する必要があり、ノードを作成するだけで、SRCの設定はJSファイルをロードしません。これはIMGとロードとは異なります)
htmlファイルの<script>タグまたはsrcが参照されるJSファイルのコードのコードはロードされ、同期的に実行されます
HTMLファイルの<script>タグのコードは、document.write()メソッドを使用して非同期的に実行されます。
document.write()メソッドを使用して導入されたJSファイルは、HTMLファイルのSRC属性によって参照されるJSファイルのコードで同期して実行されます。
1。
<script> //実行されたコードの同期</script>
2。
<スクリプトsrc = "xx.js"> </script> // xx.jsでコードを同期して実行して実行します
3。
<script> document.write( '<script src = "xx.js"> <// script>'); // xx.js </script>でコードを実行するための非同期ロード
4。
<スクリプトsrc = "xx.js"> </script>
xx.jsには次のコードがあります。
document.write( '<script src = "11.js"> <// script>'); document.write( '<script src = "22.js"> <// script>');
その後、XX.JS、11.JS、および22.JSが同時にロードされ、実行されます。
XX.JSが非同期に挿入にロードされている場合、11.JSと22.JSがまだ同期してロードされます(つまり、これらの2つのファイルの負荷は順番にあります)
テスト:11のアラートでは、document.write()22のdocument.write()で、22の書き込みステートメントがブロックされていることがわかります
5。
次の方法で、XX.JSは、補足が実行された後に非同期にロードおよび実行します。
var script = document.createElement( "script"); script.setattribute( "src"、 "xx.js"); documenrt.getElementsByTagname( "head")[0] .appendChild(script);
JSファイルをロードする関数:
var loadjs = function(url、callback){var head = document.getelementsbytagname( 'head')[0]、script = document.createelement( 'script'); script.src = url; script.type = "text/javascript"; head.AppendChild(スクリプト); script.onload = script.onreadeystatechange = function(){//スクリプトタグ、IEの下にはonreadystatechangeイベントがあります。w3c標準にはonloadイベントがあります//これらのReadyStatesはIE8以下です。 (!this.readyState)はW3C標準if((!this.readystate)|| this.readystate == "complete" || this.readystate == "loaded"){callback(); } else {alert( "JSファイルをロードできない")}}}ポイント4のテストの場合(挿入アラートが読み込み中にブロッキングを簡単に見ることができます)
tryjs.html
<!doctype html> <html> <head> <meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> <script src = "tryjs.js" onload = "if(!document.all){console.log( 'out out js callback not ie');} onreadystatechange = "console.log( 'outer js callback'、this.readystate、 'ie');"> </script> <body> </body> </html> tryjs.js
console.log( 'write begin'); document.write( '<script src = "try.1.js" onreadystatechange = "console.log(/' file 1 callback /'、his.redtate、/'ie/');" onload = "if(!document.all){console.log(/'ファイル1コールバック/'); /');} []><//script>' ); console.log('write finite '); try.1.js
console.log( 'loadjs 1 begin'); console.log( 'loadjs 1 finent');
try.2.js
console.log( 'loadjs 2 begin'); console.log( 'loadjs 2 finding');
テスト結果(ファイル2とファイル1のコールバックの完了は、IE7/8/9の注文で不確かです)
IE 7:
ログ:外側のJSコールバックロードIE
ログ:外側のJSコールバックがロードされました
ログ:書き込み開始
ログ:書き込み終了
ログ:外側のJSコールバックComplete IE
ログ:ファイル1コールバックロードIE
ログ:ファイル2コールバックの読み込みIE
log:loadjs 1が始まります
ログ:LoadJS 1が終了しました
ログ:LoadJS 2が開始されます
ログ:LoadJS 2が終了しました
ログ:ファイル2コールバックComplete IE
ログ:ファイル1コールバックComplete IE
IE8:
ログ:外側のJSコールバックロードIE
ログ:外側のJSコールバックがロードされました
ログ:書き込み開始
ログ:書き込み終了
ログ:外側のJSコールバックComplete IE
ログ:ファイル1コールバックロードIE
ログ:ファイル2コールバックの読み込みIE
log:loadjs 1が始まります
ログ:LoadJS 1が終了しました
ログ:LoadJS 2が開始されます
ログ:LoadJS 2が終了しました
ログ:ファイル2コールバックComplete IE
ログ:ファイル1コールバックComplete IE
IE9:
ログ:書き込み開始
ログ:書き込み終了
ログ:外側のJSコールバックComplete IE
ログ:ファイル1コールバックロードIE
ログ:ファイル2コールバックの読み込みIE
log:loadjs 1が始まります
ログ:LoadJS 1が終了しました
ログ:LoadJS 2が開始されます
ログ:LoadJS 2が終了しました
ログ:ファイル1コールバックComplete IE
ログ:ファイル2コールバックComplete IE
Firefox:
書き込み開始
書き込み終了
IEではなく、外側のJSコールバック
loadjs 1が始まります
LoadJS 1が終了しました
IEではなく、1つのコールバックをファイルします
LoadJS 2が始まります
LoadJS 2が終了しました
ファイル2コールバック、IEではなく
クロム:
書き込み開始
書き込み終了
IEではなく、外側のJSコールバック
loadjs 1が始まります
LoadJS 1が終了しました
IEではなく、1つのコールバックをファイルします
LoadJS 2が始まります
LoadJS 2が終了しました
ファイル2コールバック、IEではなく
上記は、編集者がもたらすJSファイル参照方法とその同期実行と非同期実行の簡単な説明です。私はそれがすべての人に役立ち、wulin.comをもっとサポートすることを願っています〜