HTML5のスクリプト属性とjsの同期・非同期読み込みの実装コードを詳しく解説
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> タグ内のコード、または src によって参照される js ファイル内のコードが同期的にロードされ、実行されます。 <br/>HTML ファイル内のコード <script> タグ内のコードは、document.write() メソッドを使用して js ファイルを導入し、非同期で実行されます。 <br/> HTML ファイル内の <script> タグは、次のコードを参照します。 src 属性で参照される js ファイルを作成し、 document.write() を使用する この方法で導入された js ファイルは同期的に実行されます <br/> Image オブジェクトを使用して js ファイルを非同期的にプリロードします (実行されません) <br/><br/> アプローチは使用しないでくださいこれは、js ファイルをロードするリクエストを開始しません: <br/>pNode.innerHTML = '<script src="xxx.js"></script>';
window.onload イベントはトリガーされません。 js ファイルが読み込まれるまで (非同期で読み込まれる場合でも)
1、 <script> //同步加载执行的代码 </script> 2、 <script src="xx.js"></script> //同步加载执行xx.js中的代码 3、 <script> document.write('<script src="xx.js"><\/script>'); //异步加载执行xx.js中的代码 </script> 4、 <script 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 が非同期で読み込まれる場合、11.js と 22.js は非同期で読み込まれます。
xx.js がスクリプト ノードによって非同期で読み込まれる場合、11.js と 22 document.write(script) を使用して .js がロードされ、次に 11.js と 22.js が同期的にロードされます (最新のブラウザでテストされています。Chrome では、document.write を使用して xx.j の非同期ロード実行を実行できなくなりました) () ) はコンテンツをドキュメントに書き込みますが、Firefox と IE はドキュメントが閉じる前に書き込むことができます (ドキュメントが閉じないようにするには、HTML でアラートを使用する方法です))
テスト: 11.js のalert() (しないでください) for ループの使用、参照 プロセッサは単一のスレッドで実行され、コードの一部の実行を継続すると、残りのコードがブロックされます)。22.js の console.log() で、 22.js のコードはブロックされます
5. 次の方法で、appendChild が実行された後に xx.js が非同期的にロードされて実行されます
var script = document.createElement("script"); script.setAttribute("src","xx.js"); documenrt.getElementsByTagName("head")[0].appendChild(script);
画像はsrcが割り当てられたときにリクエストを開始し、ファイルタイプを選びません(画像も確認コードなどのスクリプトによって動的に作成される場合があります)。そのため、jsファイルのURLは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);
var loadJS = 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(){ //script 标签,IE 下有 onreadystatechange 事件, w3c 标准有 onload 事件 //这些 readyState 是针对IE8及以下的,W3C 标准的 script 标签没有 onreadystatechange 和 this.readyState , //文件加载不成功 onload 不会执行, //(!this.readyState) 是针对 W3C标准的, IE 9 也支持 W3C标准的 onload if ((!this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){ callback(); } }//end onreadystatechange }
以上がHTML5のスクリプト属性とjsの同期・非同期読み込みの実装コードを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
