ブラウザにやさしいHTML/CSSより
基本知識
web開発者は、ブラウザの内部でどういうことが起きているのかを学ぶことで、適切な判断ができるようになり、開発のベスト・プラクティスの根拠を理解することができる。
高速化の基本テクニック
- CSSスプライト、ファイル結合
- コードの縮小
- 画像圧縮
- テキスト圧縮(minify)
- キャッシュ利用
レンダリング
- scriptタグで外部ファイルを読み込むとレンダリングが止まってしまう。そのためscriptタグはbodyタグの直前に書くのが望ましい。
HTTPリクエスト
- 一番最初にHTMLをリクエストする。
- HTMLをダウンロード後ブラウザがパースを行う。
- 原則、HTMLの上から順にリクエストをかける
- ダウンロードは並列で６本づつ、逐次的に行われる。
パース
DOM Treeがまずつくられ、style情報を関連付けて、Render Treeがつくり終えて、描画。
DOM Tree
JSやCSSでセレクトするときに利用する機構。
JSでDOM操作は重い。
Render Tree
- display: none;すると、Render Treeに含まれない。
- visibility: hidden;は含まれる。
- absolute/fixedは、別コンテキストになる
- DOM構造が変わったり、一部のCSSのプロパティに変更があると、レイアウト/リペイント。
CSS
メンテナンス性は犠牲にするな
- パフォーマンス ＜ メンテナンス性
- メンテナンス性が失われれば、将来パフォーマンスが失われる可能性も生む。
Render Layerとは
- relative, absolute, fixed, transformを使うと、Render Layerが生まれる。
- 消費コストは高いが非同期処理となる。
- 特にabsolute/fixedは、他要素との相対座標計算が省かれ高速。
- transformはleftなどより高速。
Graphic Layer
- いわゆるハードウェアアクセラレーション
- GPUに処理を任せて、レンダリングを高速化できる
- もともとは3Dレンダリング用
- DevToolsの設定から"rendering"配下の"show composited layer borders"フラグを有効にすると、視覚的に確認できるようになる。(オレンジのボーダー部分)
- translate3d(0,0,0)など一部のCSSプロパティを指定することでハードウェアアクセラレーションを有効にすることができる。
- 特にモバイル端末でCSSアニメーションを使用する際は、アニメーション中のみハードウェアアクセラレーションを有効にすると良い。
セレクタのパフォーマンス
- CSSセレクタは右辺から読み込まれる。ネストさせればさせるほどパフォマンス低下の原因に。
- 全称セレクタや子孫セレクタは重いのでできるだけ減らしたほうがよい。
- idやclassのみの指定が高速。
- だが、最近のブラウザのCSSのエンジンはかなり高速となっている。
- なので、メンテナンス性や耐久度の高いHTML/CSS構造をつくるためであればそちらを優先したほうがよいかも。
- 体感速度にはさほど影響はでない。
CSSスプライト
- 体感速度が重要。まとめすぎても体感速度が遅くなる。
- なので、まとめすぎず、分割しすぎずが大事。
- 同時接続数と、プログレッシブレンダリング(非同期)を活かす
- 同時接続数は基本的に6。IE6とIE7は2。
Webフォントについて
- シンプルなものであれば使って良いが、対象ブラウザでの視覚的テストは必須
- 画像と違ってプログレッシブレンダリングではないため、体感速度においては画像より劣る可能性もある
レスポンシブデザイン
- レスポンシブである以上、モバイルフォースとにならざるを得ない。
- また、モバイル端末はファイルサイズ上限に注意。
- モバイル端末でアニメーションを行う対象の要素は absolute/fixedにすること。
Service Workerとは
- バックグラウンドで動くJS
- App Cacheのようなキャッシュの仕組み
- こいつがあれば、ネイティヴアプリとパフォーマンスで戦えるかも？要チェック。
まとめ
- Web高速化においてボトルネックは、１つでもあってはならない。
- そのためには、ブラウザの処理プロセスを知ることが必須。
- モバイル端末でなめらかにアニメーションさせるためにはコツがいる
- CSSスプライトやファイル結合をする上で、サイズ上限を気にすること。
- パフォーマンス改善は果てがない。１から１０まで全部を求めないこと。