パフォーマンスを発揮するためのCSS

 パフォーマンスを発揮するためのCSS

Back to Basics CSS発表資料

Cb42953bfedcd81daf5b1330d98712c3?s=128

448jp | OKI Yoshiya

August 30, 2015
Tweet

Transcript

  1. 2.

    自己紹介 OKI Yoshiya • 世路庵(せろあん) • インタラクションデザイナー • フリーランス8年目 KAMABOKO

    ROAD TO 1000 (2015) lynda.com 日本語版 トレーナー (2015) Web Designing 連載 (2009~2015)
  2. 7.

    読み込み速度  HTTPリクエスト数の軽減  ファイルの結合/不要ファイル の削除  CSSスプライト  サーバー/回線の増強

     ファイルサイズの軽量化  ファイルの最適化/圧縮  gzip  演出による擬似的な軽量化 実行速度  FPSの安定化  描画負荷の軽減  GPUの利用  不要な要素の削除  演出の迅速化 改善例
  3. 8.

    Premature optimization is the root of all evil. (早まった最適化は諸悪の根 源である)

    Donald Knuth 引用:Loadmaster CC 表示-継承 2.5 https://ja.wikipedia.org/wiki/%E3%83%89%E3% 83%8A%E3%83%AB%E3%83%89%E3%83%BB% E3%82%AF%E3%83%8C%E3%83%BC%E3%82% B9#/media/File:KnuthAtOpenContentAlliance.jpg
  4. 9.

    読み込み速度  HTTPリクエスト数の軽減  ファイルの結合/不要ファイル の削除  CSSスプライト  サーバー/回線の増強

     ファイルサイズの軽量化  ファイルの最適化/圧縮  gzip  演出による擬似的な軽量化 実行速度  FPSの安定化  描画負荷の軽減  GPUの利用  不要な要素の削除  演出の迅速化 改善例 自動化できるところは自動化!
  5. 10.

    レンダリングの流れ HTML (タグスープ) DOM レンダーツリー レイアウト (リフロー) ペイント CSS CSSOM

    レンダーツリー 要素に変更が加わると、レイアウトまたはペイントから再実行される。
  6. 11.

    レイアウトに影響を及ぼすプロパティ  width  height  padding  margin 

    display  border-width  position  top/right/left/bottom  font-size  float  text-align  overflow  font-weight  font-family  line-height  vertical-align  clear  white-space  min-height など
  7. 12.

    ペイントに影響を及ぼすプロパティ  color  border-style  visibility  background 

    text-decoration  background-image  background-position  background-repeat  background-size  outline  outline-color  outline-style  outline-width  border-radius  box-shadow  text-shadow など
  8. 17.

    速ければ速いほどいい? The faster is good ? 引用:Marcus Pink CC BY

    2.0 https://www.flickr.com/photos/51775268@N00/5406005088/