JavaScript は Web ページでのスクリプトの読み込みと実行順序をどのように処理しますか?

Web ページでの JavaScript スクリプトの読み込みと実行の順序は何ですか?

JavaScript スクリプトはさまざまな形式で Web ページに含めることができます。以下を含む方法:

• インライン コードまたは外部からロードURL
• 内に含まれます。または タグ
• 属性なし、遅延、または非同期属性を持たない (外部スクリプトのみ)
• 静的ソース内に含まれるか、他のスクリプトを使用して動的に追加される

読み込み中Order

スクリプトは、インラインか外部かに関係なく、HTML コード。ただし、動的に追加されたスクリプトの読み込み順序は、ブラウザの動作によって影響を受ける可能性があります。

実行順序

JavaScript スクリプトの実行順序は、いくつかの要因によって決まります。

• 一般規則: スクリプトは、スクリプト内で見つかった順序で実行されます。
• async スクリプト: async とマークされたスクリプトは、予測できない順序で実行されます。これらは、ロードされるとすぐに、またはパーサーの終了後に実行されます。
• 動的に追加されたスクリプト: 動的に追加されたスクリプトの動作は、ブラウザによって異なります。
• defer Scripts: defer とマークされたスクリプトは、パーサーが完了するまで待機し、その後、実行された順序で実行されます。
• モジュール スクリプト (type="module"): モジュール スクリプトには自動的に defer 属性が与えられ、解析が完了した後に順番に実行されます。また、async 属性を使用して、インライン モジュール スクリプトをすぐに実行することもできます。

例

本文にインライン スクリプトが含まれるこの例では、読み込み順序がは:

1. の初期化スクリプト
2. スクリプト読み込み用の外部スクリプト
3. 別の外部スクリプトを追加するインライン スクリプト
4. 追加された外部スクリプトを使用するインライン スクリプト

実行順序は、動的に追加されたスクリプトが非同期としてマークされているかどうかによって決まります。 not:

• 追加されたスクリプトが非同期としてマークされていない場合、それを追加したインライン スクリプトの後に実行されます。
• 追加されたスクリプトが非同期としてマークされている場合、その実行順序これは予測不可能であり、それを追加したインライン スクリプトの前後に発生する可能性があります。

以上がJavaScript は Web ページでのスクリプトの読み込みと実行順序をどのように処理しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。