CSSでbody要素に背景画像を指定する

Read More

CSSでbody要素に背景画像を指定する


ってのをやってて今日ちょっと気が付いたことがある。



それは記述の仕方によってレンダリングの速度が違う、
ということ。



以下に2つのCSSがある。

その1
body {
  background-color: #fff;
  background-image: url(background.jpg);
  background-repeat: no-repeat;
  background-position: top left;
}



その2
body {
  background: #fff url(background.jpg) no-repeat top left;
}



どちらもページの背景に画像を表示させるCSSで
どちらも記述は正しいのだがレンダリングの早さが違う。



その2の方が早い。



なぜ早いか理由を考えてみた。
・記述してある文字数が少ない
・順序立てての記述となっている



記述してある文字数が少ないってのは、
単純に読み込むバイト数が減るってこと。

バイト数分のソースを解析していくので、
バイト数が少ない方がいいのは当たり前なわけで。


次の
順序立てての記述となっている
ってのも大きい理由だと思われる。


例えばその1はこんな具合にも書ける
body {
  background-color: #fff;
  background-image: url(background.jpg);
  color: #000;
  background-position: top left;
  background-repeat: no-repeat;
  font-size: 13px;
}
別にこれでも間違いではない。


だがその2の方では、
【色】【画像URL】【繰り返し】【位置】
の順序で固定されている。
# 値は省略もできる


この為、工場での流れ作業のように処理できるんだろう。



いやいや知らんかった。


直していこ。


Comments(1)

1  びるぱん  2011/03/29 (火) 06:58 ID:XXXXXXXXX
CSSの話題と聞いて

少し話が違うかもだけどa:hoverとかでも、適応される順番ってのがあるよねぇ。この場合は、順番は守らなきゃいけないわけだけどCSSのパーサー(っていうのか?)おもに解釈してるのはブラウザだと思うんだけど、これの違いももしかしたらあったりなかったりするのかなぁと思った。

ChromeとかのWebkitとFirefoxとかのMozilla…だっけ…記憶あいまいだけど、これでまた違ったりすんのかなぁ。

仕事でコード書いてるわけじゃないから、そこまで厳密な差を測ることはないけどね^^;


Category "HTML・JS・CSS" の最新記事