フロントエンドのパフォーマンスを最適化する方法にはどのようなものがありますか?

フロントエンドのパフォーマンス最適化方法: 1. http リクエストの数を減らす; 2. 画像の最適化; 3. CDN を使用する; 4. GZIP をオンにする; 5. スタイル シートと JS ファイルを最適化する; 6. を使用するCookie のないドメイン名; 7. フロントエンド コード構造の最適化。

フロントエンドのパフォーマンス最適化方法:

1. http リクエストの数を減らす

http リクエストの数を減らすために一般的に使用されるのは次のとおりです:

1) 画像を結合します。画像が多数ある場合は、それらを 1 つの大きな画像に結合して、http リクエストの数を減らすことができます。頻繁に変化する絵は不向きかもしれませんが、比較的安定して変化する絵であれば考えられます。 http リクエストの数を減らすことに加えて、大きな画像を結合すると、キャッシュを最大限に活用してパフォーマンスを向上させることもできます。

2) CSS スタイル シートと JS スクリプトをマージして圧縮します。これらの共通の目的は、http 接続の数を減らすことです。

3) 不要なリクエストを削除します。コードの作成またはシステムのアップグレード後に残った無効なリクエスト接続を開発します。

4) キャッシュを最大限に活用します。ここでいうキャッシュとは、クライアント側のキャッシュまたはブラウザのキャッシュのことです。 Expires ヘッダー情報はクライアント側キャッシュの重要な基礎であり、その形式は Expires:sun, 20 Dec 2017 23:00:00 GMT に似ています。現在時刻が Expires で指定された時刻より小さい場合、ブラウザは関連するデータ情報または HTML ファイルをキャッシュから直接取得し、現在時刻が Expires で指定された時刻より大きい場合、ブラウザはリクエストをサーバーにアクセスして関連するデータ情報を取得します。

Apache を例に挙げると、Expires は Apache の設定ファイル httpd.conf で設定できます。

2. 画像の最適化

最適化方法:

1) できるだけサイズの小さい PNG 形式の画像を使用します。

2) 異なる形式の画像の場合は、オンラインにする前に特定の最適化を実行することをお勧めします。

3) 画像の遅延読み込み。遅延読み込みとも呼ばれます。

3. CDN の使用

CDN は、ユーザーが近くで必要なコンテンツを入手できるようにし、ネットワークの混雑を解決し、応答速度を向上させるコンテンツ配信ネットワークです。 Web サイトにアクセスするユーザー。

4. GZIP をオンにする

GZIP はデータ圧縮であり、インターネットを使用して送信されるすべてのテキスト リソースを圧縮するために使用されます。 GZIP を有効にする方法は非常に簡単で、対応する Web サービス構成ファイルに移動して設定するだけです。 Apache を例として、構成ファイル httpd.conf に追加します。

5. スタイルシートとJSファイルの最適化

一般的にはcssスタイルシートファイルをファイルの先頭に置きます。たとえば、CSS スタイルシートをすぐにダウンロードできるように、 タグ内に配置します。 js スクリプト ファイルに対応して、通常はページの最後に配置します。

6. Cookie フリー ドメイン名の使用

Cookie フリー ドメイン名の概念: リクエストを送信するときは、静的な画像もリクエストして送信する必要があります。サーバーはこれらの Cookie を使用しません。つまり、これらの Cookie は役に立たず、リクエストと一緒に送信すべきではありません。

7. フロントエンドコード構造の最適化

以上がフロントエンドのパフォーマンスを最適化する方法にはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。