JavaScript スクリプトの読み込みと実行順序は、インライン、外部、非同期、遅延、動的に追加されたスクリプト間でどのように異なりますか?

JavaScript スクリプトの読み込みと実行順序を理解する

Web ページでの JavaScript の実行順序は、外部スクリプトを含めるさまざまな方法や動的スクリプトの追加により複雑になる場合があります。複雑さを明確にするために、さまざまなシナリオに基づいて JavaScript スクリプトの読み込みと実行順序を詳しく調べてみましょう。

インライン スクリプトと外部スクリプト

インライン コードであるか、外部スクリプトから読み込まれるかに関係なく、 URI の場合、スクリプトは解析中にページ内に出現する順序で実行されます。したがって、外部スクリプトの後のインライン スクリプトは、それらの外部スクリプトが読み込まれて実行されるまで待機します。

非同期スクリプト

async 属性でマークされた非同期スクリプトは、予測できない順序で実行されます。ブラウザはそれらを並行してロードし、順序に関係なく実行します。

遅延スクリプト

遅延スクリプトは、defer 属性を使用してロードされますが、解析が完了するまで保持されます。その後、遅延スクリプト間の依存関係を維持しながら、見つかった順序で実行されます。

動的に追加されたスクリプト

動的スクリプトの挿入動作はブラウザーによって異なります。たとえば、Firefox では、特に指定がない限り、動的に追加されたスクリプト タグがデフォルトで非同期になります。非同期スクリプトは、すぐに実行することも、解析後に実行することもできます。

実行シーケンス

上記を考慮すると、元の質問で説明されているシナリオの実行シーケンスは次のとおりです。

• 内の初期化とスクリプト読み込みスクリプト(ロードして順番に実行)
• 内の最初のインライン スクリプトスクリプトを動的にロードします ( の外部スクリプトの後に表示されます)
• の 2 番目のインライン スクリプト動的にロードされたスクリプトに依存します
• 動的にロードされた外部スクリプトは、並行してロードおよび実行されます (順序は予測できません)
• 2 番目のインライン スクリプトは、動的にロードされたスクリプトが正常に実行された後にのみ実行されます。これは、ブラウザは通常、スクリプトが見つかった順に実行を優先するためです。

以上がJavaScript スクリプトの読み込みと実行順序は、インライン、外部、非同期、遅延、動的に追加されたスクリプト間でどのように異なりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。