JavaScript スクリプトの実行順序は Web ページでどのように機能しますか?

Web ページでの JavaScript スクリプトの実行順序

Web 開発では、JavaScript スクリプトの読み込み順序と実行順序を理解することが重要です。 Web ページに JavaScript を組み込むためのさまざまな方法が存在し、それぞれに読み込みと実行への影響があります。

JS の読み込みと実行順序

デフォルトでは、スクリプトは次の順序で実行されます。外部かインラインかに関係なく、ページ内に表示される順序。ただし、スクリプトの遅延または非同期ロードにより、この動作が変更される可能性があります。

• defer: DOM が完全に解析されるまで実行を延期します。すべての遅延スクリプトは、ページの読み込み後に、発生した順序で実行されます。
• async: 並列で読み込み、できるだけ早く実行され、実行順序とイベント ハンドラーが中断される可能性があります。

挿入されたスクリプトの実行順序

DOM 操作によるスクリプトの動的挿入は、ブラウザによっては実行順序に影響を与える可能性があります。 Firefox では、「async」属性を持つ挿入されたスクリプトはすぐに実行されますが、属性のないスクリプトは遅延スクリプトのように実行されます。

例: インライン スクリプトと外部スクリプトの挿入

検討してください初期化用のヘッド スクリプトと動的に追加される外部スクリプトを含むシナリオbody.

• 初期ヘッド スクリプト: ページの前半に表示されるので、最初に実行します。
• 外部スクリプトを追加するインライン本文スクリプト: head スクリプトの後に実行されます。
• 外部に追加スクリプト: その実行はブラウザの動作と非同期/遅延属性によって異なります。

ブラウザの違い

動的に挿入されたスクリプトの実行順序は異なる場合がありますブラウザ間で。新しいバージョンの Firefox など、一部のブラウザは挿入されたスクリプトを自動的に「非同期」に設定しますが、他のブラウザはスクリプトを同期的に処理します。

モジュール スクリプト

最新のブラウザは JavaScript モジュールの読み込みをサポートしています「

著者別の最新記事

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

3

2205

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

11

2354

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1971

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1857

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1921

関連トピック

詳細>

• 独立直結とはどういう意味ですか？
• JVMのメモリ使用量を確認する方法
• JSPの開き方
• HTMLでデータを取得する方法
• insert文の基本的な使い方
• PowerDesigner から Word をエクスポートする方法
• メールアドレスの登録申請方法
• FILは長期保有する価値があるか?