0

私の最初の質問は、次のような複数のルールを宣言した場合

.link1 {background:url('sprite.png') 0 0;}
.link2 {background:url('sprite.png') -20px -20px;}

これらは個別の HTTP リクエストとしてカウントされますか? これについて複数の回答が見つかりました。画像がブラウザのキャッシュから取得されることがわかりました。

新しい質問: Chrome/Firefox でこれを確認するにはどうすればよいですか? コンソールのどこで、スタイルシート内から行われた HTTP リクエストの数を確認できますか?

4

3 に答える 3

1

私の頭の上からYSlowはこれを助けることができます

Yahoo の Exceptional Performance チームは、Web ページのパフォーマンスに影響を与える 34 のルールを特定しました。YSlow の Web ページ分析は、これら 34 のルールのうち、テスト可能な 23 のルールに基づいています。

  1. HTTP リクエストを最小限に抑える

つまり、スプライトは、作成される HTTP リクエストの数を明確に減らします。

于 2013-11-13T13:22:57.643 に答える
1

Chrome または Firefox 開発者ツールを起動し、[ネットワーク] タブをチェックして、すべてのネットワーク操作と要求のリストを表示します。

スプライトは、CSS で何回参照されても、単一の GET リクエストのみを必要とする必要があります。最初のリクエスト後にキャッシュされます。

YSlowなどのツールやオンライン ページ速度テスト/プロファイラーを使用して、ネットワーク リクエストを調べることもできます。

于 2013-11-13T13:27:58.147 に答える
1

これらは個別の HTTP リクエストとしてカウントされますか?

いいえ。最初にキャッシュされ、次にキャッシュから再利用されます。場合によっては、SSL を使用すると、再訪問時にブラウザーが強制的に再ロードされることがあります。

Minimize HTTP Requestsルールは悪いルールではありませんが、「スプライト シート」が非常に大きくなると、スタイル ルールの管理が困難になる可能性があります。

于 2013-11-13T13:29:38.970 に答える