[CSS]ライン(border)に点線を使うとページスクロールが重くなった

Read More

CSSのライン(border属性)にはいくつかの種類が指定できる。
直線に始まり、点線、二重線、破線…などなど


基本的にどれを指定してもOKだがサイトの雰囲気にあったものを使うのがまあ普通だと思う。
# 画像使う人もいるね


んで、今日サイトのデザインをいじっていて一つ気がついたことがある。


それは…



ラインに点線を多用するとページのスクロールが重くなる
ってこと。




何年もやってきて今更って感じな情報なのだが、今日初めてページスクロールが重くなるのを自分で体感した。

なるほど、点線の描画にはマシンパワーを大きく使うのか。

ただし点線のみでページが重くなるのを体感したわけではなくて、GIFアニメと一緒に使うと重くなった。
これがGIFアニメでなくただのGIFやPNGならそうはならなかった。

つまり点線である一定のマシンパワーを消費し、GIFアニメーションでさらにマシンパワーを消費したときなどに起こりやすいということになる。


色々試していて特にページスクロールの重さを感じたのは点線(dotted)のときだったが破線(dashed)も結構重かった。

今日の今日まで気がつかなかったのはそこまで大量の点線とGIFアニメを併用して使ったことがなかったというのと、
たぶんマシン環境に恵まれていたからだろう。



今回自ら体験できたことで、今後はページスクロールが重くならないように、
・ラインに点線は多用しない
・GIFアニメの多用しない

という点にも気をつけなければならないとわかった。


あとこの現象はline-heightの値を小さくしているとき、
つまり1ページにおける表示の密度に大きく関係する。

まあ考えてみると当たり前なのだが。




--
しかし改めてこう考えてみるとCSSもJSもユーザ側のマシンスペックに大きく依存するものだったんだよなあ。

昨今はPCの性能が昔に比べ飛躍的に向上しているので忘れてたというかちょっと油断していた。






Comments(2)

1  115ちゃん  2013/07/02 (火) 11:36 ID:ArIyUMw15
へぇ~~~!
全然気付かなかった!!

そういえば、普段何も考えずに書いているCSSだったりが、
ユーザのマシン環境によってなんて、普段あんまり考えてないですね。。。

今回の↑件みたいなのは気をつけないとですね。

実際体験してみないと分からない部分なんで、参考になりました!
AZS!!

2  シラサヤ  2013/07/02 (火) 23:31 ID:g8XcZng15
CSSで描画するものの種類によってページの重さが違うって意外と盲点だったよ。

ヘッダで読み込むファイル数や、CSSの記述順序…
気をつけるべき点って多いねぇ


Webコーダがちゃんと居ればいいんだけど