JavaScript ファイルの読み込み用にコードを最適化する方法の詳細な説明

JS エンジンの部分では、レンダリング エンジンがスクリプト タグを解析するときに、JS エンジンに制御が与えられることがわかります。スクリプトが外部リソースを読み込む場合、ダウンロードされるまで待つ必要があります。実行されました。 したがって、ここでは、多くの最適化作業を行うことができます。

BODY の一番下に配置します

レンダリング エンジンができるだけ早く DOM ツリーをレンダリングできるようにするには、ページが削除できるようにスクリプトを Body の一番下に配置する必要があります。つまり、DOMContentLoaded イベントが早期にトリガーされます。ただし、IOS Safari、Android ブラウザ、および IOS Webview では、本文の最後に js スクリプトを配置しても、結果は変わりません。これは、HTML4 で定義されているスクリプト属性であり、スクリプトが外部リソースを参照している場合、それを一時的に中断してロードします。 レンダリング エンジンは次の HTML ドキュメントの解析を続けます。解析が完了すると、スクリプト内のスクリプトが実行されます。

<script src="outside.js" defer></script>

彼のサポートは <=IE9 です。

その実行順序は厳密に依存しています。つまり、

<script src="outside1.js" defer></script>
<script src="outside2.js" defer></script>

ページが解析された後、outside1 とOutside2 を実行する順序に従い始めます。ファイル。
IE9 未満で defer を使用する場合、これら 2 つが連続して実行されない可能性があります。ここでは、それを処理するためのハックが必要です。つまり、2 つの間に空のスクリプト タグを追加します

<script src="outside1.js" defer></script>
<script></script> //hack
<script src="outside2.js" defer></script>

ASYNC 読み込み。

async は、H5 で新しく定義されたスクリプト属性です。 これは別の js 読み込みモードです。

スクリプト(非同期)に遭遇すると、レンダリングエンジンはファイルを解析します

• スクリプトの外部リソースを並行してロードしながら、残りのファイルの解析を続けます

• スクリプトがロードされると、ブラウザーはドキュメントの解析を停止し、JS エンジンに許可を与え、ロードされたスクリプトを指定します。

• 実行後、ブラウザの解析スクリプトを再開します

• 非同期によって読み込みのブロックの問題も解決できることがわかります。ただし、async は非同期で実行されるため、ファイルの実行順序が不一致になります。つまり、

<script src="outside1.js" async></script>
<script src="outside2.js" async></script>

このとき、先にロードを終えた人が先に実行されます。したがって、依存するファイルは一般に async を使用せず、defer を使用する必要があります。defer の互換性は比較的低く、IE9+ ですが、一般的にモバイル端末で使用されるため、この問題は存在しません。

スクリプト非同期

スクリプト非同期は、一部の非同期読み込みライブラリ (require など) で使用される基本的な読み込み原則です。コードを直接入力します:

function asyncAdd(src){
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
}
//加载js文件
asyncAdd("test.js");

この時点では、ファイルは問題を引き起こすことなく非同期的に読み込むことができます。ただし、この方法でロードされた js ファイルは順序が乱れており、依存ファイルは正常にロードできません。この時点で、上記の関数を最適化する必要があります

var asyncAdd = (function(){
  var head = document.head,
    script;
  return function(src){
    script = document.createElement('script');
    script.src= src;
    script.async=false;
    document.head.appendChild(script);
  }
})();
//加载文件
asyncAdd("first.js");
asyncAdd("second.js");
//或者简便一点
["first.js","second.js"].forEach((src)=>{async(src);});

ただし、スクリプトを使用して 1 ステップで読み込む場合、読み込みを開始する前に CSS ファイルが読み込まれるまで待つ必要があるため、時間がかかります。ブラウザの同時読み込みの利点を最大限に活用します。静的テキストを使用して非同期または遅延をロードしても、この問題は発生しません。

スクリプトを使用して非同期ロードする場合は、CSSがロードされるのを待ってからロードするだけです

静的非同期ロードを使用する場合、CSSとJSは同時にロードされます

これら3つのうちのどれを選択するかについては、主にリーダーに依存します。ターゲットが何であるか

、IE8、9、携帯電話、デスクトップブラウザー、または両方の組み合わせと互換性があるかどうかを教えてください。

しかし、特定のスキルを単独で使用するシナリオでは、いくつかのヒント

ヒント

に注意を払う必要があります。
1. js ファイルは本文の最後に配置する必要があります2. async を使用する場合は、下位互換性のために最後に defer を追加します

<script src="test.js" async defer></script> //如果两者都支持，async会默认覆盖掉defer
//如果只支持一个，则执行对应的即可

通常、使用する読み込みは遅延読み込みです。それは非常に強い依存関係です。

以上がJavaScript ファイルの読み込み用にコードを最適化する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。