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

従来、JavaScript ファイルの読み込みには 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグが使用されていました。
次のように:
559853b309d71af2b7cfa1cfce4f8bd02cacc6d41bbb37262a98f745aa00fbf0

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

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

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

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