GitHubがCSSのパフォーマンス改善のためにおこなったことをまとめたスライド
Post on:2012年12月10日
sponsors
GitHubのCSSのパフォーマンス改善について、2012年ホノルルで行われた「CSS Dev Conference」のスライドが公開されていたので、紹介します。
GitHub's CSS Performance -Speaker Deck
スライドの中から、いくつかピックアップしてみました。
セレクタから不必要なタグをはずす
必要のないタグは、セレクタからはずす。
子孫セレクタは無し
子孫セレクタは重いのでできるだけ減らす。
ユニバーサルセレクタは無し
全てを走査するので、非効率。
制限のないセレクタは無し
マッチするのを探すため、重くなります。
classセレクタを繋げない
無駄なdivタグを排除
L.6のような無駄なdivタグは削除。
文字数を少なく
L.5のdivをbに変更、この4byteが大きい。
パフォーマンス改善の結果
結果、パフォーマンスが劇的に改善されました。
プレゼンの模様は、40分ほどの動画でも公開されています。
GitHub's CSS Performance from Jon Rohan on Vimeo.
sponsors
