JSファイル参照方法、同期実行、非同期実行に関する簡単な説明

著者：Eve Cole 更新時間：2025-05-30 20:00:04

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：

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ではなく

クロム：

上記は、編集者がもたらすJSファイル参照方法とその同期実行と非同期実行の簡単な説明です。私はそれがすべての人に役立ち、wulin.comをもっとサポートすることを願っています〜