Web フロントエンドのパフォーマンス最適化の詳細説明: リソースのマージと圧縮

2つの目的のためのリソースの結合と圧縮

1. httpリクエストの数を減らす
2. 要求されたリソースのサイズを縮小する

Google ホームページのケーススタディ

1. HTML 圧縮
2. CSS 圧縮
3. jsの圧縮
4. ファイルの結合
5. gzipを有効にする

1. HTML圧縮

図 1 は圧縮されていない Sina のホームページを示しており、図 2 は圧縮された Google のホームページを示しています。

HTMLコード圧縮とは、スペース、タブ、改行など、テキストファイルでは意味を持つがHTMLでは表示されない文字や、次のような他の意味を持つ文字を圧縮することです。
HTML コメントも圧縮できます。

HTMLを圧縮する方法

1. 圧縮にはオンラインウェブサイトを使用する
2. nodejsはhtml-minifierツールを提供します
3. バックエンドテンプレートエンジンのレンダリング圧縮

2. HTML圧縮

1. デッドコードの削除
2. CSSセマンティックマージ

HTMLを圧縮する方法

1. 圧縮にはオンラインウェブサイトを使用する
2. HTML 内の CSS を圧縮するには html-minifier を使用します
3. clean-cssを使用してCSSを圧縮する

3. Js の圧縮と混乱

1. 無効な文字の削除
2. コメントを削除
3. コードの意味の削減と最適化
4. コード保護

jsを圧縮して混乱させる方法

1. 圧縮にはオンラインウェブサイトを使用する
2. html-minifier を使用して html 内の js を圧縮する
3. uglifyjs2を使用してjsを圧縮する

3. ファイルの結合

ファイルのマージと非マージの比較

1. ファイル間にアップストリーム要求が挿入されるため、ネットワーク遅延が N-1 倍に増加します。
2. パケットロスの影響がより深刻
3. プロキシサーバーによって切断されている可能性があります

ファイルの結合に関する問題:

1. 最初の画面レンダリングの問題
2. キャッシュ無効化の問題

ファイルの結合の問題を解決します。

1. 公共図書館の統合
2. 異なるページを結合する
3. 状況に応じて行動し、変化する状況に適応する

jsを圧縮して混乱させる方法

1. 圧縮にはオンラインウェブサイトを使用する
2. マージを実装するにはNode.jsを使用する

画像関連の最適化
png8/png24/png32の違い

1. png8 - 256色 + 透明度のサポート
2. png24 - 2^24 色 + 透明度はサポートされていません
3. png32 - 2^24 色 + 透明度のサポート

各画像形式には独自の特性があり、ビジネスシナリオに応じて異なる画像形式を選択することが重要です。

さまざまな形式の画像に関する一般的なビジネスシナリオ

1. jpg - 透明な画像を必要としないほとんどのビジネスシナリオ
2. pngは透過性をサポートし、ブラウザと互換性があります
3. Webp圧縮はより優れており、iOS Webviewと互換性があります
4. svg ベクター グラフィックス、埋め込みコード、比較的少ない、比較的シンプルな画像スタイル

さまざまな形式の画像に関する一般的なビジネスシナリオ

1. jpg - 透明な画像を必要としないほとんどのビジネスシナリオ
2. png - 透明な画像を必要とするほとんどのビジネスシナリオ
3. webp —— Android すべて
4. SVGベクターグラフィックス - 比較的シンプルな画像スタイルを使用したビジネスシナリオ

画像を圧縮する

実際の写真では、比較的重要でない色情報を破棄します

CSS スプライト

ウェブサイトで使用されている複数の画像を1つの画像に結合します

アドバンテージ

ウェブサイトのHTTPリクエスト数を減らす

欠点

統合画像が大きい場合、一度に読み込むのに時間がかかります

画像のインライン

画像コンテンツをHTMLに埋め込むことで、ウェブサイトへのHTTPリクエスト数を減らすことができます。

Androidでwebpを使用する

WebP の利点は、より優れた画像データ圧縮アルゴリズムにあります。これにより、画像サイズが小さくなり、肉眼では区別がつかないほどの画質が得られます。また、ロスレスとロッシーの圧縮モード、アルファ透明度、アニメーション機能も備えており、JPEG と PNG への変換効果は優れており、安定しており、統一されています。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。