フロントエンド最適化の概要-サーバー側-HTTP 時間の削減-画像合成 css sprite_html/css_WEB-ITnose

先上一张整洁的前端优化总结图(之前の一篇总结图太烂了)

前切图讲究精细、图片规格越小好、重量越小好、其实サイズは関係ありません。コンピューターはすべてバイト単位で計算されます。クライアントは画像を表示するたびに、サーバーにリクエストを送信します。

したがって、画像の数が多くなり、リクエストが多ければ多いほど、遅れる可能性が高くなります。そこで、ここで行うべきことは、Web ページでよく使用される画像を 1 つの画像ファイルに統合し、CSS の「backg

round-image」、「background-repeat」、「background-position」の組み合わせを使用することです。背景の位置を作成するには、background-position で数値を使用して背景画像の位置を正確に特定できます

。そしてcssスプライトはこの機能を持ったツールです。 CSSスプライトを使用します。これら 3 つの画像のバイトの合計。 了 决 3. 画像の名前付けに関するデザイナーの問題を解決します。画像の集合に名前を付けるだけで済みます。これにより、Web ページの制作効率が向上します。 4. スタイルを変更すると便利です。1 つまたは複数の画像の色やスタイルを変更するだけで、Web ページ全体のスタイルを変更できます。メンテナンスがより便利になります。 欠点

CSS スプライトは非常に強力ですが、次のような無視できない欠点もあります:

1. 画像を結合するときは、複数の画像を秩序正しく合理的に結合する必要があります。また、セクションに不要な背景が表示されないように十分なスペースを確保する必要があります。ただし、最も問題となるのは、画像の幅が十分でない場合です。簡単に背景が壊れます

2. CSS スプライトは、PS またはその他のツールを使用して、各背景ユニットの正確な位置を測定し、計算する必要があります。これは、難しいことではありませんが、非常に面倒です。幸いなことに Tencent の

Brother Gui は ADOBE AIR を使用して CSS Sprites スタイル生成ツールを開発しましたが、使用方法はまだ少し柔軟性に欠けますが、Photoshop の測定よりもはるかに便利で、スタイルは直接生成されます

、コピーしても大丈夫です。 ！

. ）以下の画像を追加します。これにより、画像のバイト数が増加し、CSSが変更されます。 CSS 4. CSSスプライトは、特にページにICO（アイコン）の束がある場合は、学習および適用されるスプライト。つまり、多くの場合、CSS スプライトを使用するかどうかを決定する前に、メリットとデメリットを比較検討する必要があります。

若 もっと良いツールがあれば、私に勧めてください！コミュニケーションをとって一緒に学ぶこともできます。