高パフォーマンス Web サイト構築ガイドラインの概要_html/css

高パフォーマンス Web サイト構築ガイドラインの概要_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:50:19

オリジナル

1164 人が閲覧しました

高パフォーマンスの Web サイト構築の概要

ルール 1 - HTTP リクエストの削減

受信に費やすのはエンドユーザーの応答時間の 10% ～ 20% だけです要求された HTML ドキュメントの上。残りの 80% ～ 90% は、HTML ドキュメントによって参照されるすべてのコンポーネント (画像、スクリプト、フラッシュ、スタイルシートなど) に対する HTTP リクエストに費やされます。したがって、応答を改善する最も簡単な方法は、コンポーネントの数を減らし、それによって HTTP リクエストの数を減らすことです。

絵地図

絵の数を減らすために、座標の位置決めにマップタグを使用します。ナビゲーションバーに複数の画像を使用する場合に使用できます。多くの欠点があります。手動で座標位置決めを完了するのは難しく、エラーが発生しやすいです。長方形以外の形状を定義することも難しく、DHTML で定義された画像はまだ IE では機能しません。お勧めしません。

CSS スプライト (スプライト/スプライト)

複数の画像を 1 つの画像に結合し、background-position を使用して配置することで、個別の画像を使用するより 50% 高速になります。イメージマップ内のイメージは連続している必要がありますが、CSS スプライトにはこの制限がありません。また、結合された画像は個別の画像の合計より大きく、結合された画像には追加の空白が含まれると主張する人もいます。実際には、スプライト画像の方が小さく、画像自体のコストが削減されます。 (カラーテーブル、フォーマット情報など) ページ内の背景、ボタン、ナビゲーションバー、リンクなどに大量の画像を使用する必要がある場合に使用できます。長所 – タグがきれいで、画像が少なく、応答時間が速い。

デメリット: 後から修正するのが面倒でメンテナンスが難しい。事前に変更する必要がなく、簡単に変更できる。

スプライト画像の作り方:

Baidu で CSS スプライトを検索して、対応する製品ソフトウェアを見つけます (ソフトウェアダウンロードアドレス) [ http://www.baidu.com]
gulp などの自動化ツール、自動合成
独自の PS を作成

インライン画像

データを使用:Web ページに画像を含める URL パターンですが、追加の HTTP リクエストは含まれません。私たちは皆、http: パターンの URL に精通しています。他の同様のパターンには、ftp:、file:、maito などがあります。

data:url パターン

は 1995 年に提案されました。小さなデータブロックを即値としてインライン化でき、データは URL 内にあります。それ自体は真ん中です。

インラインイメージとは何ですか?

インラインイメージは新しいタイプの画像形式であり (私の意見では、正しく理解できているかどうかはわかりませんが)、正式にはデータ URI スキームと呼ばれます。。通常、保存する画像は Web ページに

  <img src="http://blog.xmaoseo.com/images/xmaoseo.jpg"/>

ログイン後にコピー

で記述する必要があります。インライン画像の記述方法は

<img src="data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA"/>

ログイン後にコピー

インライン画像構文

  <img src="data:image/png;base64,iVBOR....>

ログイン後にコピー

になります。

data - データを取得するプロトコル名
image/png - データ型名
Base64 - データのエンコード方式
iUANR.... - エンコードされたデータ
: , ; - データ URI で指定される区切り記号スキーム

この画像形式では追加の HTTP リクエストが必要ないのは良いことですが、もう 1 つ重要な点があります。ブラウザーはこの画像をキャッシュしません。データ URL により HTTP リクエストが節約されますが、画像が Web ページ上の複数の場所に表示される場合、Web ページのコンテンツが増加し、ダウンロード時間が長くなります。もう 1 つの点は、IE8 以下ではこの種の画像がサポートされていないため、IE6 のユーザーはさらに悲惨です。また、100kb を超える画像に Base64 エンコードを使用すると、画像サイズも大きくなります。その結果、Web ページの全体的なダウンロード数が増加します。 (BASE64 でエンコードされた画像により、Web サイトの閲覧が遅くなり、クラッシュします http://blog.xmaoseo.com/125.html) しかし、多くの賢明な人々は、背景タイル画像をインライン画像として使用しており、これは非常に良い効果をもたらします。また、HTTP リクエストが減少し、Web サイトの速度が向上します。次に、画像の Base64 エンコーディングを取得する方法を尋ねるかもしれません。インターネット上には無料の基本エンコードおよびデコードツールが多数ありますが、最も簡単な方法は PHP ファイルを作成することです。 Base64_encode() を使用してエンコードします。例:

echo base64_encode(file_get_contents('211-11.JPG'));

ログイン後にコピー

Web ページのダウンロード遅延の問題を解決する方法。最も簡単な方法は、CSS で記述された背景を使用して CLASS クラス名を呼び出すことです。たとえば、上記の例を使用してみましょう。

.blogxmao{background:url(data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA")}

ログイン後にコピー

<div>..内容...</div><div>..内容...</div>

ログイン後にコピー

スクリプトとスタイルシートのマージ

モジュール性の原則に従って、コードを複数の小さなコードに配置する必要があります。ただし、ファイルごとに余分な http リクエストが発生するため、パフォーマンスが低下します。理想的には、ページで複数のスクリプトまたはスタイルシートを使用しないでください。世界のトップ 10 の Web サイトには通常、スクリプトとスタイルシートが 2 つまでしかありません。

最適化には seajs や requirejs などのモジュラーツールを使用します。そうしないと、ファイルの数が増えたときに手動でマージするのが面倒になります。