CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
CSSの@importを動的に1ファイルにまとめて圧縮するPHPのクラス「CSS_DynamicCompressor」 - Rewish
CSSを小分けにして@importで読み込んで管理している方も多いかと思いますが、これではHTTPリクエストがファイルの数だけ発生して、パフォーマンス的に良くありません。 Googleがページの表示速度を検索結果に反映するとか言い出したりもしているので、これはもうリクエスト数を減らすしか無いですね！ でも手動でファイルを一つ一つ連結するのはとても面倒です！と言うわけで、そんな面倒な作業を自動でやってくれるPHPのクラスを書いてみました。 ライブラリについて @importで複数のファイルを読み込んでいるCSSを、動的に解析し、連結・圧縮を行います。また、表示する際にLast-ModifiedやExpiresなどのHTTPヘッダーを送出したり、gzip圧縮を行うなど、リクエストを出来るだけ軽減できるようにしています。 ダウンロード CSS_DynamicCompressor ライセンス MI
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
