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

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

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

JS の読み込みと実行順序

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

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

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

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

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

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

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

ブラウザの違い

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

モジュール スクリプト

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