今日は、「HTML5とか勉強会」に初参加してきました。
会場のサイバーエージェントにも初潜入。大きな会場はほぼ満員でした。
金曜の放課後だったので、疲れで後半ウトウトしてしまってました。。
主催
会場
株式会社サイバーエージェント
東京都渋谷区道玄坂1丁目12番1号 (渋谷マークシティ 13F)
ブラウザのパフォーマンスを限界まで高める、HTMLコーディングの考え方
川田 寛氏（NTTコムウェア株式会社）
今日のアジェンダ
- 戦略の立て方
- 改善の方法
- 最近のWeb標準の動向
戦略の立て方
- いろいろ書籍化してきたが、パフォーマンスのノウハウはたった半年でレガシー化してしまった。。
- Webを取り巻く環境は酷くなった。
- ナビゲーション（画面遷移）・・・ネットワーク環境の悪化
- ランタイム（アニメーション）・・・Androidは辛い
- パフォーマンスで重要なポイントは「頑張り過ぎないこと」
- 職人魂ダメ！
- パフォーマンス改善は果てが無い
- どれくらい頑張るかをはじめに決める
- 「90パーセンタイルで1秒以下になるように」というのが鉄板
改善の方法
- 重要な3つのポイント
- Initial Render, Visually Complete, Load Complete の観点が重要
- Initial Render・・・最初のレンダリングが開始される時間
- 対策に必要なこと
- Visually Complete・・・見た目が完成している状態（スクリプト実行は含まない）
- 「Speed Index」って？ Webページの速さを測る指標
- 最近ブームになって来ている
- unload -> load の発火までの時間だけでなく、Webページが表示される過程も評価
- Speed Indexを高めるには？
- glunt使ってたら普通に対策できる
- CSS, JavaScriptの最適化（Minify、小さいサイズのものは Combine 他）
- 画像ファイルの最適化（optimize, JPG化, CSS Sprite 他）
- より全体から対策するなら、Critical Rendering Path
- Make the Web Faster
- Load Complete・・・全ての読み込みが完了
最近のWeb標準の動向
- Web Performance Working Group
- W3C内のワーキンググループ
- Web Timing
- いろんなログをJS上で取得する
- いかにして限界を引き上げるのか？
- Page Visibility, Page Visibility 2
- Timing control for script-based animations
- Resource Hints
- 日本Cordovaユーザ会を立ち上げたよ！
ブラウザーに優しくして、アニメーションを滑らかに
Brian Birtles氏（Mozilla Japan）
- 10年ずっと Firefox のアニメーションの開発
- UIを増やさなくても、アニメーションで説明できることも多い
- アニメーションのおかげで、小さい画面でも情報量を増やすことができる
- 特にモバイルデバイス
- ただし、パフォーマンスが必要（パフォーマンスが良くなければ情報が欠落してしまう）
- ブラウザの内部では、いろんなツリーを持っている（DOMツリー、レンダー（フレーム）ツリー）
- 作戦その1）display:none を利用して、画面外に出たなノードをツリーから消去する
- 「リフローを避ける」戦略
- 実は、レイアウト（リフロー）の過程が重い
- 作戦その2) リフローさせてしまうCSSプロパディを避けるという戦略
- top, left, margin-top などより、transformを使ってみる
- font-size はアニメーションさせない
- 描画の重さは、領域と重さの掛け算
- 領域を小さくする
- 事前描画をすれば速くなる（SVGをimg要素で出す）
- レイヤーを使う
- ためらっているブラウザ（ブラウザが忙しくなるとカクカク）
- コンポジター
