ng-japan

Published at 21 Mar, 2015

Angualrjsの日本初のカンファレンス ng-japan2015 が渋谷で2015/03/21にあったので行って来た。
場所はサイバーエージェント。以前参加した勉強会もここでやってた気がする。
毎度の通り、最初の1個目のセッションはあんまり聞けなかった。

結構人がいて定員500名の会場が普通に埋まってた
こんなかんじ↓

すごい人！ ng-japan venue is packed! #ng_jp pic.twitter.com/Cb1Zfn9Q63
— Eiji Kitamura (@agektmr) 2015, 3月 21

今回アシアルの田中さんのセッションが個人的に面白かったのでそちらにフォーカスして書いています。

onsen-uiのはなし

ネイティブのアプリとは違って、View部分をHTMLで記述。ネイティブ層、HTML5層があって内部はHTML5で作っている。
アプリ内ではWebviewを利用している。

###メリット

###色々メリットはあるがしかし…

###しかし状況は変わってきた

###デメリット

##チューニングの方法

Loading
- リソースの読み込みやパース
- 組み込みなのであんまやることない
Scripting
- JavaScriptの実行時間。純粋な計算は基本的に問題なし。
- リフロー、Canvasへの命令など時間はかかる
- ProfileTabで簡単にわかる
Rendering
- レイアウト処理
- 再計算(Recaluculate Style)
- CSS OMを参照してDOM*CSSルールの数分マッチング処理が走る。
- 使ってないCSSのルールマッチングの文だけ遅くなる
- 重たいCSSのセレクタの書き方
  - 子孫セレクタやめたほうがいい
  - クラスで指定する書き方が速い
- 使ってないCSSのルールは消す。
Layout
- すべてのDOMのレイアウト情報を計算
- 計算された結果の視野的なオブジェクトのツリーがレンダリングツリー
Painting
- 描画処理
- DisplayListの生成
- Rasterize
  - ピクセル化
- CompositeLayeers
  - レイヤの合成

translate3d(0,0,0)が早いのはなぜ？
- GPUで描画されるから? -> 半分正解
- Compositelayersのみ計算される transformなどはCompositeLayersのみ走る
詳しくはCSS Trigersでググること。
- CSSをいじるとどのフェーズで計算されるかが書いてある!
DOMリークを防ぐ
- DOMが参照されたまま開放されない。
- 見た目より深刻
- detached DOMツリーとそれに参照されている
- リソースが全てリークする
- DesktopOSはスワップするが、モバイルは画面上の要素消したりするので注意。
reflowを起こさないようにする
- 画像のサイズは必ず指定する
- 一度DOMツリーから切り離して操作する
- offsetHeightやgetBoudingClientRect()を呼び出しつつstyleを変更するみたいなコードをループで書くと地獄
GPUバウンド
- CPUよりもGPUの方で時間がかかっている状態
- Rasterize後にテクスチャとしてGPUのVRAMに転送
  - Composite Layers
- GPUへの転送や合成がCPU時間よりも時間がかかっていればGPUバウンドとしてみなすことができる

##QA

ionic(海外製のAngular+Cordovaを用いたハイブリッドアプリUIフレームワーク)と比較。
- パフォーマンスチューニング済であること
- Androidベースでの最適化(ionicはiOSをメインでサポートしているとのこと)
- 日本語のドキュメントが豊富

他にも興味深いセッションがあったが、メモをあまりとっておらず、下記資料ベースm(_ _)m。

TypeScriptの布教活動が行われた。

気になった話は下記。