スクリプトの読み込みを最適化する方法

単純にヘッドまたはボディでスクリプトを参照すると、DOM が変更されるかどうかが不明なため、スクリプトはダウンロードおよび実行中にページのレンダリングを完全にブロックします。

スクリプトが頭または本文の途中にある場合、空白のページが表示される可能性が非常に高く、ユーザー操作が不可能になり、ユーザー エクスペリエンスが非常に低下します。

JavaScript ファイルを並行してダウンロードできる場合でも、ダウンロード プロセスは画像やその他のリソースのダウンロードに影響します。

最初に行う必要があるのは次のとおりです:

本文の最後に script タグを配置します

HTTP リクエストを行う際には、スリーウェイ ハンドシェイクなどの追加のパフォーマンス オーバーヘッドがあるため、次のことを試みる必要があります。 HTTP リクエストをできるだけ減らすには:

JavaScript ファイルを 1 つにマージする

1 つのリクエストで複数の JavaScript ファイルをロードする

しかし、上記では問題は解決されません。この間、ブラウザは他のことを行うことができません。これには、ノンブロッキング スクリプトが必要です。つまり、JavaScript コードは、ページが読み込まれた後にのみ読み込まれます。つまり、スクリプトは、ウィンドウ オブジェクトの読み込みイベントがトリガーされた後にダウンロードされます。

1 遅延スクリプト

defer: まず、スクリプトが DOM を変更しないことを確認する必要があります。これを追加すると、このスクリプトは DOM を変更せず、ページが読み込まれた後に実行できることがブラウザーに通知されるためです。 。 この属性を script タグに追加すると、ファイルを他のリソースと並行してダウンロードできるようになります。 IE は IE10 以降の遅延をサポートしません

async: defer との違いは、ダウンロードが完了した後に実行されるのに対し、defer はページが読み込まれるまで実行されないことです

2 動的スクリプト

は、必要に応じてスクリプト タグを動的に作成します。 適切なタイミングでページに挿入します。このメソッドを使用して、必要に応じてファイルを読み込むことができます。また、スクリプトの読み込み順序を指定することもできます。

3 スクリプトをロードする関数

scriptタグ内の関数を呼び出して他のスクリプトをロードします

もちろん、使用できる遅延ローディングライブラリもいくつかあります。

以上がスクリプトの読み込みを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。