ブラウザはCSSや画像を使ってグラデーションをより速くレンダリングしますか？

Question

かなり集中的なウェブサイトを作成しています。ページの背景全体にはマルチストップのリニアグラデーションが含まれています。

私の質問は、ページの背景がグラデーションを作成するためにCSS3を使用している場合や、グラデーションをpngとして作成してレンダリングする方が速い場合にbackground-size: cover;を使用すると、ブラウザがレンダリングできるページの背景。

これは描画速度です。この例ではページの読み込み時間に興味がありません。私はと思っています。 pngは高速ですが、わかりませんでした。

Answer 1

これを測定する主観的な方法はそれほどありませんでしたが、はと思われますが、CSSで線形グラデーションを使用すると、大きな画像よりもレンダリングが優れています。

Answer 2

これは確かにグラデーションの種類、グラデーションのサイズ、実行しているブラウザに依存します。

速度が絶対的に重要な場合は、ほとんどのユーザーが使用すると思われるブラウザで2つの方法を並べて測定します。

将来のリリースでパフォーマンスが変更される可能性があることに注意してください。