angualrjs

Sat, Mar 21, 2015

ng-japan

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のはなし AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ HTML5ハイブリッドアプリとは ネイティブのアプリとは違って、View部分をHTMLで記述。 ネイティブ層、HTML5層があって内部はHTML5で作っている。 アプリ内ではWebviewを利用している。 ###メリット クロスプラットフォーム性 ネイティブ機能をJsから呼び出し ハイブリッド用のCordovaから呼び出し OSからのAPI呼び出しを一本化する ###色々メリットはあるがしかし… ハイブリッドアプリは作ってみたものの… Facebookでザッカーバーグの発言。“HTML5にかけたのは失敗” ###しかし状況は変わってきた モバイルの高速化 CrossWalkだったり、ChromiumがWebviewに使われたり。 DHH（Rails作者）によるハイブリッドアプリに関する好評 ###デメリット UIコンポーネントが標準で持っていない チューニングの方法が難しい ##チューニングの方法 インスペクタのTimelineタブで計測 AndroidではChrome・iOSではsafariのinspecter タイムラインタブのカテゴリの説明（図） 描画が始まって16ms以下に抑えると60fps以上出る 逆にそれ以上だしてもディスプレイが追いつかない チューニング対象となる5つのフェーズ 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で描画されるから?