JavaScript ファイル読み込みの最適化_JavaScript スキルを学ぶ

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

BODY

の下部に配置

レンダリング エンジンができるだけ早く DOM ツリーをレンダリングするには、ページができるだけ早く白い画面から抜け出せるように、スクリプトを本文の下部に配置する必要があります。ただし、IOS Safari、Android では、ブラウザと IOS の Web ビューで本文の最後に js スクリプトを配置しても結果は同じであるため、ここで最適化するための追加の操作が必要です。 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 は、H5 で新しく定義されたスクリプト属性です。 これは別の js 読み込みモードです。

• スクリプト (非同期) が発生した場合、レンダリング エンジンはファイルを解析します
• 残りのファイルの解析を続行し、スクリプトの外部リソースを並行してロードします
• スクリプトがロードされると、ブラウザーはドキュメントの解析を停止し、JS エンジンに許可を与え、ロードされたスクリプトを指定します。
• 実行後、ブラウザ解析スクリプトが復元されます

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

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

このとき、先にロードを終えた人が先に実行されます。したがって、通常、依存ファイルでは非同期を使用せず、遅延を使用する必要があります。
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、携帯電話、デスクトップ ブラウザー、または 2 つまたは 2 つの組み合わせと互換性があるかどうかです。 。
ただし、特定のスキルを単独で使用するシナリオでは、使用時にいくつかのヒントに注意する必要があります。

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

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

通常、使用するロードは、強い依存関係があるため遅延ロードです。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。