js でのファイル読み込みの最適化に関連する問題

それでは、参考価値の高いjsファイル読み込みの最適化（詳細解説）をベースにした記事を共有させていただきますので、皆様のお役に立てれば幸いです。

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

BODY の一番下に配置します

レンダリング エンジンができるだけ早く DOM ツリーをレンダリングできるようにするには、ページが抜け出せるようにスクリプトを Body の一番下に配置する必要があります。つまり、DOMContentLoaded イベントが早期にトリガーされます。ただし、IOS Safari、Android ブラウザ、および IOS Webview では、本文の最後に js スクリプトを配置しても、結果は変わりません。同じ。 したがって、js ファイルの読み込みを最適化するには、ここで追加の操作が必要です。

DEFER 読み込み

これは、レンダリング エンジンがスクリプトに遭遇したとき、そのスクリプトが外部リソースであることを示すために使用されます。が参照されると、一時的に中断されてロードされます。 レンダリング エンジンは次の 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);});

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

スクリプトを使用して非同期ロードする場合は、CSSがロードされるのを待ってからロードするしかありません

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

この3つのうちのどれを選択するかについては、主にリーダーに依存します。目標は何ですか? IE8 と 9、モバイル ブラウザー、デスクトップ ブラウザー、または両方の組み合わせと互換性がありますか?

ただし、特定のスキルを単独で使用するシナリオでは、使用時にいくつかのヒントに注意する必要があります。

js ファイルはボディの最後に配置する必要があります

非同期を使用する場合は、下位互換性のために最後に defer を追加します

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

通常、使用するロードは遅延ロードです (強い依存関係のため)。 上記は私があなたのためにまとめたものです。

関連記事:

Node.jsでAsync関数とAwait関数を使う

webpackが127.0.0.1にアクセスできない問題を解決する

webpack-dev-serverにリモートアクセス設定メソッドを実装する

以上がjs でのファイル読み込みの最適化に関連する問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。