スタイルシートをシンプルに効率よくすることは、ネットワーク転送量の低下、パース速度の向上、そしてHTMLとのマッチング効率化に繫がります。これはページのパフォーマンスを大きく向上させることに繫がります。
前回は大まかなブラウザの挙動を見ました。
今回は、そういった動きを踏まえた上で、やってしまいがちな非効率なスタイル指定を挙げてみます。そういった指定を避けることで、軽量で高速なスタイルシートを記述することができるでしょう。
なお、この記事は、Google Page Speedの”Use efficient CSS selectors“および、Mozillaの”Writing Efficient CSS for use in the Mozilla UI“などを元に書いています。
Continue reading…
Google Page Speedの記事から始まってしまったサイト高速化関連記事。
今回は、効率の良いスタイルを書くために、ブラウザがHTMLを解析してDOMツリーをつくり、そこにスタイルをあてていく過程を見ていきましょう。
基本的な手順がわかると、どういったcssの書き方が効率が良く、どういった書き方では迂遠であったり冗長であったりするのかが、理解できるようになると思います。
この記事は、Google Page Speedの”Use efficient CSS selectors“および、Mozillaの”Writing Efficient CSS for use in the Mozilla UI“などを元に書いています。そのため、この仕組みは主にMozillaエンジンについてです。IEやWebKitでは若干異なった動作をする部分もあるようです。
Continue reading…
Naohiko MORI / nao58
ITエンジニア。最近はめっきりWeb系で、言語はPHP/Javascriptがメインに。野球はドラゴンズ、音楽はHR/HM。ラグビーはオールブラックス。読むなら筒井康隆。
More
Enter the query to search and hit enter.
