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