6

この質問のために、「効率」とは多かれ少なかれページのレンダリング速度を意味します。ただし、スムーズなスクロールなどのパフォーマンスの問題も考慮する必要があります。

ページに縞模様の背景を配置するとします。効率の観点から、幅 100 ピクセル (10 個のストライプを表示) の画像をタイル化するのと、幅 20 ピクセル (2 つのストライプを表示) の画像をタイル化する方が良いでしょうか? もちろん...大きな画像は読み込みに時間がかかりますが、非常に小さな画像を並べるときに問題が発生したように感じます. 最適なポイントはありますか？

特にこの質問のパート2を考えると、これはブラウザに依存すると思い始めています（おそらくオペレーティングシステムにも依存しますか？）：

半透明性を実現するには、半透明の .png ファイルを並べて表示するか、CSS 不透明度属性を使用する方が効率的ですか (ここでも、大きなタイルと小さなタイルの問題が発生します)。私の経験から、古いバージョンの IE は、タイル化された半透明の .png の方が、CSS の不透明度属性を使用するよりもうまく動作するようです (ただし、科学的なテストは行っていません)。

角の丸みも良い例です。一部のブラウザーでは、CSS 属性や JavaScript 実装の代わりに画像を使用すると、ページがより高速になり、スクロールがよりスムーズになるようです。

これは実際には CSS よりも幅広い問題ですが、最近私が考えていることです。

-ピーター

4

2 に答える 2

2

はい、これはすべて OS とブラウザ中心です。

たとえば、Safari では、JS よりも CSS 変換を使用して要素をアニメーション化する方が効率的です。

一般に：

  • 非常に小さな画像を並べて表示したくない場合。ブラウザが画面全体を再描画する作業がはるかに少ないため、20px の画像は 1px よりもうまくタイル表示されます。ただし、20px と 100px の違いはほとんどありません。
  • CSS で実行できることは、別の画像を読み込むよりも効率的です。(角丸、ドロップシャドウなど)
  • 大きな注意点は、IE の css フィルターです。それらの多くは効率的ではないため、イメージに戻す方がよい場合があります。
于 2011-06-06T16:22:58.413 に答える
0

私のテストに基づいて、ページは可能な限り最小の画像を使用してより速くレンダリングされ、CSS 自体がタイリングを行うようです。これが行われる速度は、ブラウザのみに依存します。

半透明の背景に関しては、CSS を使用すると帯域幅が軽くなりますが、CSS の不透明度はまだ完全にサポートされていないため、そのようなことに取り組むときはそれを考慮します.

他の方の検査結果が知りたいです...

于 2011-06-06T16:19:08.553 に答える