3

同じ羊皮紙のパターンを使用しているが、色が異なる、非常に多くのテクスチャ背景を含むデザインを作成しようとしています。もちろん、色ごとに異なるタイルの背景画像を作成してエクスポートすることもできますが、必要なブロックの背景色を持つ要素をオーバーレイできる単一のモノクロパターンを作成する方が賢明ではないかと思います。

私の質問は、このアプローチがパフォーマンスの観点から問題ないかどうかです。私は以前に小さな要素に対してこれを行いましたが、サイトの背景、特定のページのいくつかのdiv、ボタンなど、多くの要素でこの手法を使用するのが許容できないほど遅いかどうか疑問に思っています。ブラウザは、あまりにも多くのpng alphaを少し窒息させます（このプロジェクトはIE8 +ですが、慈悲深いです）。

何かご意見は？

編集：私がパフォーマンスについて話すとき、私の主な関心事はダウンロード時間ではなく、実際のページレンダリングパフォーマンスです。過去にアルファPNGが一部のブラウザに遅れをとっていることに気づいたので、小さなタイル状のテクスチャを広範囲に使用しても、同様の問題が発生する可能性があります（私は推測します）。

この段階では、ダウンロードのパフォーマンスは問題ではありません。

4

3 に答える 3

1

単一のモノクロパターンを使用することを強くお勧めします。この場合、ブラウザは1つの画像ファイルのみをロードするのに対し、他の方法では複数のファイルをロードするため、これをお勧めします。サイトが小さく、トラフィックが少ない場合は、おそらくそれほど重要ではありませんが、実行する作業の量を最適化することは常に良い習慣です。

于 2012-06-07T16:03:27.363 に答える
1

パフォーマンスの観点からは、同じ羊皮紙のパターンを異なる色で貼り付けると言えます。私はあなたのソリューションがよりクリーンであることに同意します-それは私が好むものです-しかしあなたはクライアント側でパフォーマンスが低下する可能性のあるユーザー（ローエンドの技術を持っているユーザー？モバイルデバイス？）を遠ざけるだけですが、余分な帯域幅そうでなければ、モノクロパターンを使用して節約できます（IMO）帯域幅に基づいてユーザーを遠ざける可能性は低くなります（私たちが話している違いはどれくらいですか？）。これらの状況の実際のベンチマークは見つかりません。

これに関連するいくつかの側面について説明しているリンクを次に示します。最初のリンクには、IE8のPNGアルファ24ビットでメモリリークがあるとユーザーが言っていることに注意してください。

CSS透明度とPNG透明度のどちらが優れていますか？

CSSの不透明度のパフォーマンス。画像のフェード

于 2012-06-07T16:04:14.710 に答える
1

何のパフォーマンス？ロードのパフォーマンスが高い場合は、使用するファイルの数を減らすとスピードが上がります。スクロールのパフォーマンスは、それをどのように構築するか、そしてターゲットオーディエンスに依存します。

私は何年も前に米国の視聴者がいるサイトを構築し、単色の透明なPNGを使用して無地をオーバーレイしました。私はこれをかなりの数のマシンでテストしました。唯一の表示パフォーマンスの問題は、何かがそうでないものの上をスクロールしていたかどうかでした。たとえば、2つのパターンをオーバーレイし、1つはスクロールし、もう1つはスクロールする場合、低速のマシンやモバイルデバイスで再描画の問題が発生します。

これは、ページの背景など、ほんの一握りの要素に対するものでした。1ページあたり数十の要素に適用すると、古いマシンで問題が発生する可能性があります。ただし、たとえば、トランジションのある大きなJSスライダーよりも、リソースをあまり消費しません。

于 2012-06-07T16:16:36.273 に答える