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.

top of page

©2017 coliss