GitHubがCSSのパフォーマンス改善のためにおこなったことをまとめたスライド

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.