パフォーマンスを発揮するためのCSS
- 1. パフォーマンスを 発揮するためのCSS 2015.8.30 (Sun) 沖 良矢（世路庵） Back to Basics CSS @ DMM.comラボ
- 2. 自己紹介 OKI Yoshiya • 世路庵（せろあん） • インタラクションデザイナー • フリーランス8年目 KAMABOKO ROAD TO 1000 (2015) lynda.com 日本語版 トレーナー (2015) Web Designing 連載 (2009～2015)
- 3. 話すこと 1. パフォーマンスとは 2. 改善の手法 3. なぜ必要なのか？
- 7. 読み込み速度 HTTPリクエスト数の軽減 ファイルの結合/不要ファイル の削除 CSSスプライト サーバー/回線の増強 ファイルサイズの軽量化 ファイルの最適化/圧縮 gzip 演出による擬似的な軽量化 実行速度 FPSの安定化 描画負荷の軽減 GPUの利用 不要な要素の削除 演出の迅速化 改善例
- 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
- 9. 読み込み速度 HTTPリクエスト数の軽減 ファイルの結合/不要ファイル の削除 CSSスプライト サーバー/回線の増強 ファイルサイズの軽量化 ファイルの最適化/圧縮 gzip 演出による擬似的な軽量化 実行速度 FPSの安定化 描画負荷の軽減 GPUの利用 不要な要素の削除 演出の迅速化 改善例 自動化できるところは自動化！
- 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 など
- 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 など
- 13. 動的な変更でもパフォーマンスの高いプロパティ opacity（透明度） transform translate（位置） scale（拡大率） rotate（回転） GPUが利用されるため高速
- 15. なぜ必要なのか？ Why we need for better performance ?3.
- 17. 速ければ速いほどいい？ The faster is good ? 引用：Marcus Pink CC BY 2.0 https://www.flickr.com/photos/51775268@N00/5406005088/
- 19. 時代や状況によって、 求められるパフォーマンスは千差万別 By times and circumstances, required performance changes. 引用：alexkerhead CC BY 2.0 https://www.flickr.com/photos/26354629@N02/2783514026/