従来、JavaScript ファイルの読み込みには タグが使用されていました。 <br>次のように: <br><script type="text/javascript" src="example.js"> タグはウェブに追加する限り非常に便利です。ページにアクセスすると、ブラウザがそれを読み取って実行します。ただし、いくつかの重大な欠陥があります。 <br> (1)読む順番を厳密にする。ブラウザは Web ページに表示される順序で Javascript ファイルを読み取り、すぐに実行するため、複数のファイルが相互に依存している場合は、依存関係が最も少ないファイルが最初に配置され、依存関係が最も小さいファイルが最初に配置されます。最大の依存関係を最初に配置する必要があります。ファイルは最後に配置する必要があります。そうしないと、コードでエラーが報告されます。 <br> (2)パフォーマンスの問題。ブラウザは「同期モード」を使用して <script> タグをロードします。これは、ページが「ブロック」され、後続の HTML コードを実行する前に JavaScript ファイルがロードされるのを待機することを意味します。複数の <script> タグがある場合、ブラウザはそれらを同時に読み取ることができず、一方を読み取ってからもう一方を読み取る必要があるため、読み取り時間が大幅に長くなり、ページの応答が遅くなります。 <br>これらの問題を解決するには、DOM メソッドを使用して Javascript ファイルを動的にロードできます。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"> function loadScript(url){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.body.appendChild(script); }</pre><div class="contentsignin">ログイン後にコピー</div></div><p> この原理は、ブラウザが即座に <script> タグを作成し、JavaScript ファイルを「非同期」で読み取ることです。これによりページ ブロックは発生しませんが、別の問題が発生します。この方法でロードされた Javascript ファイルは元の DOM 構造にないため、DOM-ready (DOMContentLoaded) イベントおよび window.onload イベントで指定されたコールバック関数は無効になります。それのための。 。 </p> <p>その他の js 読み込みや、DOM メソッドを使用して Javascript ファイルを動的にロードする関連記事については、PHP 中国語 Web サイトに注目してください。 </p>