従来、JavaScript ファイルの読み込みには タグが使用されていました。 <br>次のようになります: <br><script type="text/javascript" src="example.js"> タグはWeb ページを追加するだけで、ブラウザがそれを読み取って実行するので、非常に便利です。ただし、いくつかの重大な欠陥があります。 <br> (1) 厳密な読み取り順序。ブラウザは Web ページに表示される順序で Javascript ファイルを読み取り、すぐに実行するため、複数のファイルが相互に依存している場合は、依存関係が最も少ないファイルが最初に配置され、依存関係が最も小さいファイルが最初に配置されます。最大の依存関係を最初に配置する必要があります。ファイルは最後に配置する必要があります。そうしないと、コードでエラーが報告されます。 <br> (2) パフォーマンスの問題。ブラウザは「同期モード」を使用して <script> タグをロードします。これは、ページが「ブロック」され、後続の HTML コードを実行する前に JavaScript ファイルがロードされるのを待機することを意味します。複数の <script> タグがある場合、ブラウザはそれらを同時に読み取ることができず、一方を読み取ってからもう一方を読み取る必要があるため、読み取り時間が大幅に長くなり、ページの応答が遅くなります。 <br>これらの問題を解決するには、DOM メソッドを使用して Javascript ファイルを動的にロードします。 <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="78858" class="copybut" id="copybut78858" onclick="doCopy('code78858')"><u>コードをコピー</u></a></span> コードは次のとおりです: </div> <div class="codebody" id="code78858"> <br> function loadScript(url){ <br> var script = document.createElement("script"); <br> script.type = "text/javascript"; <br> document.body.appendChild(script); <br> <br> <br>この原理は、ブラウザが即座に <script> タグを作成し、JavaScript ファイルを「非同期」で読み取ることです。これによりページ ブロックは発生しませんが、別の問題が発生します。この方法でロードされた Javascript ファイルは元の DOM 構造にないため、DOM-ready (DOMContentLoaded) イベントおよび window.onload イベントで指定されたコールバック関数は無効になります。それのために。</div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
