ホームページ > 記事 > ウェブフロントエンド > JavaScript ファイルの同期読み込みと非同期読み込みの実装原則_JavaScript スキル
JavaScript ファイルの同期読み込みと非同期読み込みの実装原則_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 17:46:371011ブラウズ
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> の src 属性によって参照される js ファイルを導入します。非同期的に実行される <BR>html ファイル内の ; タグ。 js ファイルのコード内で document.write() メソッドを使用して導入された js ファイルが同期的に実行されます。 <BR>Image オブジェクトを使用して、js ファイルを非同期的にプリロードします (実行されません) <br><br>次のようなものは使用しないでください。このメソッドは、js ファイルをロードするリクエストを開始しません: <BR>divNode.innerHTML = '<script src="xxx.js"> ;</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 には次のコードが含まれています:
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> の src 属性によって参照される js ファイルを導入します。非同期的に実行される <BR>html ファイル内の ; タグ。 js ファイルのコード内で document.write() メソッドを使用して導入された js ファイルが同期的に実行されます。 <BR>Image オブジェクトを使用して、js ファイルを非同期的にプリロードします (実行されません) <br><br>次のようなものは使用しないでください。このメソッドは、js ファイルをロードするリクエストを開始しません: <BR>divNode.innerHTML = '<script src="xxx.js"> ;</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 がロードされ、非同期で実行されます
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 はロード後にブラウザーによってキャッシュされます。
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 ファイルをロードする関数:
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
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
>
< ;body>
tryjs
>
コードは次のとおりです: console.log('write begin'); document.write(''); document.write(''); console.log('書き込み完了');
try.1.js
コードをコピー
try.1.js
コードをコピー
コードは次のとおりです: console.log('loadjs 1 begin'); console.log('loadjs 1 終了');
try.2.js
コードをコピーします
コードをコピーします
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。