2015-10-16 1 views
12

HTTP/2を使用すると、接続を多重化でき、サーバーへの複数の接続を不要にできます。 1つの接続で、多くの個別のイメージをクライアントに送信できます。これは、多くの画像を1つに結合し、CSSを使ってそれを切り取る古い画像スプライトパターンを取り除きます。どのような状況で、HTTP/2で個別にイメージをロードすると、すべてのイメージをHTTP/1.1でスプライトで一度にロードするよりも時間がかかるのですか?

スプライトが実際にはHTTP/2の世界でまだ高速であるかどうか不思議です。もしそうなら、どんな状況下で?

答えて

9

スプライトは、複数のリクエストがキューに入れられないようにするために使用されるため、1つのペイロードではそのサイトのすべてのスプライトを取得できます。

しかし、スプライトでは、ウェブサイト全体で使用されている1つのページにすべてが必要でない追加のアイコンがたくさんある傾向があります。

http/2多重化では、キューイングリソースはもはや問題になりません。各ページに必要なファイルをダウンロードするだけでスピードを上げることができます。

ただし、一部のイメージを1つのファイルに結合することで、ファイル転送全体のサイズを小さくすることができます。

BenoîtBéraudとAlexandre Masselotが実行する速度テストでは、個々のスプライトよりも高速にスプライトシートをロードする例が示されています。 、HTTP/2多重化して https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/

+1

これは悪い仮定ではありませんが、圧縮を想像するのは難しいですが、相違点の多くがH2を超えて画像を個別に読み込む利点を上回ります。もしそうなら、私はそれが非常に工夫された状況の下にあると思う。良い研究テーマになるでしょう。 –

+0

スプライト速度テストについては、http://blog.octo.com/en/http2-arrives-but-sprite-sets-aint-no-dead/を参照してください。 – Sarcoma

0

を:彼らはレイチェルアンドリューによるHTTP/2程度使用して、HTTP/2 http://blog.octo.com/en/http2-arrives-but-sprite-sets-aint-no-dead/

拡張書き込みアップはここで見つけることができたときにスプライトセットはまだ、サイトのパフォーマンスを最適化するために使用することができることを結論付けました単一の大きなファイルを読み取るのではなく、サーバーは多数の小さなファイルを読み取ることになります。サーバーがリソース制限されている場合(例えば、Internet-of-Thingsの一部の実装)、小さなものの代わりに単一の大きな読み取りを行う方が良い場合があります。各読み取りによって、サーバーOSは潜在的に多くのファイルアクセス関連操作を実行します。

クライアント側では、ブラウザは大きなファイルではなく、多数の小さなファイルを管理します。現在のスプライトワークフローで使用されているコードパスは、一般的に使用されているので、よくマッサージされ、最適化されていると思います。したがって、小さなファイルをたくさん持っているという新しいケースは、少なくともある程度は遅くなる可能性があります。

関連する問題