js読み込みではDOMメソッドを使用してJavaScriptファイルを動的に読み込みます

従来、JavaScript ファイルの読み込みには <script> タグが使用されていました。 <br/>次のように: <br/><script type="text/javascript" src="example.js"></script>

<script> タグはウェブに追加する限り非常に便利です。ページにアクセスすると、ブラウザがそれを読み取って実行します。ただし、いくつかの重大な欠陥があります。 <br/> (1)読む順番を厳密にする。ブラウザは Web ページに表示される順序で Javascript ファイルを読み取り、すぐに実行するため、複数のファイルが相互に依存している場合は、依存関係が最も少ないファイルが最初に配置され、依存関係が最も小さいファイルが最初に配置されます。最大の依存関係を最初に配置する必要があります。ファイルは最後に配置する必要があります。そうしないと、コードでエラーが報告されます。 <br/> （２）パフォーマンスの問題。ブラウザは「同期モード」を使用して <script> タグをロードします。これは、ページが「ブロック」され、後続の HTML コードを実行する前に JavaScript ファイルがロードされるのを待機することを意味します。複数の <script> タグがある場合、ブラウザはそれらを同時に読み取ることができず、一方を読み取ってからもう一方を読み取る必要があるため、読み取り時間が大幅に長くなり、ページの応答が遅くなります。 <br/>これらの問題を解決するには、DOM メソッドを使用して Javascript ファイルを動的にロードできます。 </script>

　　function loadScript(url){ 
　　　　var script = document.createElement("script"); 
　　　　script.type = "text/javascript"; 
　　　　script.src = url; 
　　　　document.body.appendChild(script); 
　　}

この原理は、ブラウザが即座に <script> タグを作成し、JavaScript ファイルを「非同期」で読み取ることです。これによりページ ブロックは発生しませんが、別の問題が発生します。この方法でロードされた Javascript ファイルは元の DOM 構造にないため、DOM-ready (DOMContentLoaded) イベントおよび window.onload イベントで指定されたコールバック関数は無効になります。それのための。 。 </script>

その他の js 読み込みや、DOM メソッドを使用して Javascript ファイルを動的にロードする関連記事については、PHP 中国語 Web サイトに注目してください。