Web フロントエンドの最適化手法

現在、インターネット BS モデル アプリケーションは、ウェブサイト システム、OA プラットフォームなどの開発を含め、ますます広範囲に開発されています。では、どのようにしてそれをうまく実行し、うまく実行して、ユーザーに良い体験をもたらすか? Web フロントエンドの最適化に関する私の経験を共有しましょう。これらの経験は、仕事の実践においてより実践的なテクノロジーです
1. HTTP リクエストの数を最小限に抑えます - トレードオフが必要です

画像 (CSS スプライトなど) をマージします。組み込みの画像使用データ)、CSS と JS をマージすることは非常に重要ですが、マージされたファイルのサイズを考慮する必要があります。

2. ファイルヘッダーに Expires または Cache-Control を指定して、コンテンツをキャッシュ可能にします。

今後のページ訪問時に不必要な HTTP リクエストを避けるために、静的コンテンツと動的コンテンツを区別します。

3. 空の src と href を避ける

link、script、img、iframe など、これら 2 つの属性を持つタグに注意してください

4. gzip を使用してコンテンツを圧縮します

Gzip は、可能なすべてのファイル タイプを圧縮します。ファイルのボリュームを減らす

5. CSS を先頭に置く

これは、より多くのコンテンツを含むページやインターネット速度が遅いユーザーにとってはより重要です。スタイルシートはページの領域内に含まれるように配置する必要があります。

6. JS を一番下に配置します

HTTP/1.1 仕様では、ブラウザーが各ホスト名に対して 2 つ以下のコンテンツを並行してダウンロードすることが推奨されています。問題は、ホスト名が異なっていても、スクリプトがページの並列ダウンロードを妨げることです

7. CSS 式の使用を避ける

ページが表示され、ズームしたり、スクロールしたり、マウスを動かしたりするときは、注意する必要があります。 CSS 式の計算頻度に影響します。 1 回限りの式を検討するか、CSS 式の代わりにイベント ハンドラーを使用します。

8. CSS と JS を外部ファイルに入れる

組み込みコードによる HTTP リクエストの削減と、外部ファイルを使用したキャッシュの利点との間の妥協点を比較検討する必要があります。

9. CSS と JS を効率化する

目的は、ダウンロードされるファイルのサイズを減らすことです。圧縮ツールとして JSMin と YUI Compressor が考えられます。

10. 重複した JS と CSS を排除する

スクリプトを繰り返し呼び出すと、追加の HTTP リクエストが追加されるだけでなく、複数の操作で時間が無駄になります。 IE と Firefox では、スクリプトがキャッシュ可能かどうかに関係なく、JavaScript の再評価という問題が発生します。

11. AJAX をキャッシュ可能にする

タイムスタンプを利用して、より高度な応答キャッシュを実現し、サーバー データを同期的に更新します。

12. できるだけ早く出力バッファをフラッシュします

特に css の場合、js ファイルの並列ダウンロードの方が意味があります

13. GET を使用して AJAX リクエストを完了します

XMLHttpRequest を使用する場合、ブラウザの POST メソッドは「2 段階」の「Go」プロセス: 最初にファイル ヘッダーを送信し、次にデータを送信します。 URL が 2K 未満の場合、GET を使用してデータを取得する方が合理的です。

14. 遅延読み込み

ページが正常に動作していることを確認したら、スクリプトを読み込み、ドラッグアンドドロップやアニメーションなどを実装したり、コンテンツの一部を非表示にしてコンテンツを折りたたんだりします。

15. プリロード

無条件ロード、条件付きロード、期待ロードに注意してください。

16. iframe の数を最小限に抑える

コンテンツが空であっても読み込みに時間がかかり、ページの読み込みが妨げられ、意味的な意味がなくなることを考慮してください。iframe には 1 ～ 2 オーダーのオーバーヘッドがあることに注意してください。 onload イベントをブロックする一般的な方法では、IE と Firefox のメイン ページのスタイルシートがそのダウンロードをブロックします。

17. 404 を避ける

HTTP リクエストの消費時間は非常に大きく、一部のサイトでは 404 エラーの応答ページが「Are you looking for *」に変更されますが、これによりユーザー エクスペリエンスは向上しますが、サーバー リソース (データベースなど) も浪費されます。等。）。

18. Cookieのサイズを減らす

不要なCookieを削除し、ユーザーの応答への影響を軽減するためにCookieのサイズを可能な限り小さく保ち、適切な有効期限を設定します。有効期限を早め、Cookie をクリアするのが早すぎないようにすると、ユーザーの応答時間が短縮されます。

19.画像を最適化する

GIF形式をPNG形式に変換して、スペースが節約されるかどうかを確認してください。すべての PNG 画像に対して pngcrush (または他の PNG 最適化ツール) を実行します

20. HTML で画像を拡大縮小しないでください – トレードオフです

HTML で高さと幅を設定するために必要以上に大きい画像を使用しないでください。