Effective web performance tuning for smartphone

「Effective web performance tuning for smartphone」の内容

1. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. E ective Web Browser Performance Tuning for Smartphone 1 Dec 16, 2014 ! Kei Takahashi kei.takahashi@dena.com Game Development Infrastructure Gr. DeNA Co., Ltd. ~FINAL FANTASY Record Keeper の軌跡~

2. 自己紹介 2 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 高橋慧 (たかはしけい) Japanリージョンゲーム事業本部技術・編成部ゲーム開発基盤グループ(GDI)所属 Web Frontend Engineer といいつつ最近はアプリにお熱 ! お仕事は、主に共通開発系のタスクと消防士系がメイン ! 略歴 2008 ~ : Web制作会社を転々とするデザインからインフラまで、何でも屋 2010 ~ 2011: 面白法人KAYACに所属 Web Frontend, Unity 面白業 2012 ~ : 株式会社ディー・エヌ・エーに所属

3. 3 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Smartphone Webのためのプロファイリングツール Smartphone Webパフォーマンスチューニングの基本原則『FINAL FANTASY Record Keeper』で学ぶ Smartphone Webパフォーマンスチューニングアジェンダ以降のスライドでは、特に記載の無い場合 Smartphone = SP と省略します。

5. 5 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. SP Webのためのプロファイリングツール Modern browser has powerful tools! Safari Google Chrome h=ps://www.google.com/intl/en/chrome/browser/privacy/eula_text.html Mozilla Firefox h=ps://www.mozilla.org/en- -US/foundaLon/trademarks/policy/

7. SP Webのためのプロファイリングツール 7 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Browser WebView iOS 6.x~ Android 4.4~ Android ~4.3 iOS ~5.x Mac Safari(6.0~) Instruments Android Device Monitor PC Chrome Safari, Chrome の Remote Inspector が強力

9. 9 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. SP Webのためのプロファイリングツール Timeline ブラウザの動作を時系列で表示するプロファイラ! Network ネットワーク周りのモニタリングと統計情報 Rendering レンダリングにまつわる処理の統計情報 JavaScript & Event JavaScript, DOM Eventにまつわる処理の統計情報 Safari (with Remote Inspector)

10. 10 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. SP Webのためのプロファイリングツール Debug Menu(Mac Only) Browser Cache ブラウザの持つ様々なキャッシュの状態を表示 RealLme Network リアルタイムなネットワークの統計情報 Back/Forward Page Cache ページキャッシュの統計情報? Frame Rate ページ表示中のフレームレートを表示 Safari

11. 11 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. SP Webのためのプロファイリングツール Debug Menu(Mac Only) Render Tree ブラウザ内部でもつレンダリングツリー情報 Render Layer Tree DOMレイヤベースのレンダリングツリー情報 Show ComposiLng Borders ページ内に合成レイヤーを表示する Show Tiled Scrolling Indicator スクロールを含むページのプリレンダリング情報 Safari

12. 12 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. SP Webのためのプロファイリングツール AcLvity Monitor ハードウェア動作の統計情報 CPU CPU Time Real Memory Usage Energy DiagnosLcs ハードウェアの消費するエネルギーの統計情報 CPU AcLvity Network AcLvity Open GL ES Analysis Open GL ESの統計と問題の検知 Instruments

14. 14 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. SP Webのためのプロファイリングツール Chrome (with Remote Inspector) Network ネットワーク周りのモニタリングと統計情報 Timeline ブラウザの動作を時系列で表示するプロファイラ JavaScript CPU Pro le JavaScriptの実行によるCPUの使用時間統計 Heap Snapshot ブラウザが確保するヒープメモリのスナップショット Heap AllocaLons ブラウザによるヒープメモリの確保状況を表示

15. 15 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. SP Webのためのプロファイリングツール Rendering OpLon レンダリングにまつわるオプション機能 Show paint rectangles ペイントが行われている範囲の表示 Show composited layer borders 合成レイヤー範囲の表示 Show FPS meter FPSを表示 Show potenLal scroll bo=lenecks スクロール時のボトルネックとなりうる原因を表示 Chrome (with Remote Inspector)

16. 16 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. SP Webのためのプロファイリングツール Canvas Frame Canvas 2D Contextに対する描画命令を表示 Layers ブラウザがレンダリングを行う際の合成レイヤーを表示 chrome://tracing Chromeの動作にまつわるプロセスの全てをトレース統計情報を表示する(最強) Chrome (with Remote Inspector) Chrome (PC Only)

18. 18 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. SP Webのためのプロファイリングツールまとめ Safari, Chrome の Remote Inspectorは強力各プロファイラを適材適所に使おういずれも開発版を使うのがオススメ Safari - -> Webkit Nightly Build Chrome - -> Chrome Canary ただ、たまにバグってる場合も… ネイティブデバッガはハードウェア情報を見るのに役立つ

20. SP Webパフォーマンスチューニングの基本原則 20 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. "気になってもすぐに手を付けるんじゃなくて本当に手を入れるべきか計測してから手を入れるのが鉄則。" by Songmu / おそらくはそれさえも平凡な日々 #isucon2 で連覇させてもらってきました h=p://www.songmu.jp/riji/archives/2012/11/isucon2.html "推測するな、計測せよ" by Robert C. Pike

23. 23 1. [PC]Timelineプロファイラでボトルネックの検知 2. [SP]発見したボトルネックが各SP上でどのような影響をもたらしているかを計測 3. 効果範囲を検討し、改善の判断をする 4. [PC]各プロファイラを用いながら改修実装の改修はもちろん、必要であれば追加実装 5. [SP]改善を確認問題検知と改善のワークフロー SP Webパフォーマンスチューニングの基本原則 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

26. 26 SP Webパフォーマンスチューニングの基本原則ポイント: ユーザの操作行動ベースでプロファイリングするシナリオを決め、計測する ex: 画面が読み込まれ、表示された(ローディング) 特定の箇所をクリックした 10秒間画面を表示したまま待機 10秒間画面をスクロールした画面内のタブを選び、コンテンツを切り替えた Timelineプロファイラでボトルネックの検知 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

30. 30 SP Webパフォーマンスチューニングの基本原則 Timelineプロファイラでボトルネックの検知 Self Time(処理時間)が20msを超えている JavaScript: 純粋に重い処理なのか、無駄な処理が含まれていないか ! Rendering, Painng: 画像のデコード処理などの重い処理以外(通常のCSSやスタイル変更など)で20ms超えるのであれば何らかの対策をとる Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

31. 31 SP Webパフォーマンスチューニングの基本原則 Timelineプロファイラでボトルネックの検知一定の間隔で似たような処理が行われている JavaScript: setInterval, setTimeout, requestAnimaLonFrameなどの呼び出しが考えられるが、ループ処理内で無駄な処理を行っていないか ! Rendering, Painng: 特にrecalculate styleが走り続けるなどが見受けられる場合、 CSSアニメーションによる描画の阻害、もしくはJavaScriptからのDOM要素のスタイルプロパティへの連続的なget,setが行われていないか Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

33. 33 SP Webパフォーマンスチューニングの基本原則 Timelineプロファイラでボトルネックの検知 5MBを超える大きなGCが走っている GC前にヒープを大量に消費するような重い処理がある可能性が高いムダなロジックでヒープ食いつぶしていないか? 世代別GCのold generaLon側のGCが走る時は少なくとも100msはブロックされるので、できれば頻度は抑えたい old generaLonに入りやすい(絶対?)のは、DOM要素などのヒープの確保サイズが大きいもの Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

34. 34 SP Webパフォーマンスチューニングの基本原則 Timelineプロファイラでボトルネックの検知下部の Heap, Element, Listener グラフが増え続けている特にSingle Page ApplicaLonで使用済みの event listener の解放がされていないメモリリークを抱えている Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

35. 35 SP Webパフォーマンスチューニングの基本原則 Timelineプロファイラでボトルネックの検知 Chrome Extension(拡張機能)による処理は除外詳細ウィンドウの左側カラムのリストに(VM????? extensions:???)などの記載があればChrome Extensionsの処理なので除外する Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

36. 36 SP Webパフォーマンスチューニングの基本原則 Timelineプロファイラでボトルネックの検知 Self Time(処理時間)が20msを超えている一定の間隔で似たような処理が行われている高頻度のイベント内でスタイルプロパティへのアクセス 5MBを超える大きなGCが走っている下部の Heap, Element, Listener グラフが増え続けている Chrome Extension(拡張機能)による処理は除外これでだけ抑えれば8割の問題は発見できます Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

37. 37 SP Webパフォーマンスチューニングの基本原則ボトルネックに対するシューティング Network JavaScript CPU Pro le Heap Snapshot Heap Allocaons Rendering Opon Canvas Frame Layers ! などの各プロファイラでシューティングを Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

44. 44 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニングざっと見た結果(当時のメモ) JS code 列をまったファイルの置換処理などはかなり負担ががが。およそかのスタイルプロパティにアクセスしている?。ヒープの消費が激しく、およそ度が上がりそう。モデルやデータクラスなどの不要なインスタンスの解放がされているかどうかが怪しい。メモリリークは間違いなくしてそう。 Android る) CPU レンダリング時間かかりすぎ。スプライト大きすぎる? transform ぬーーーー。無理かも…

46. 46 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニングベンチマーク端末 iPhone5 (iOS7.0) iOS 標準スペック端末 Nexus 5 (Android4.4.2) iOS 標準スペック端末 HTC J Bueer y (Android 4.2) Android 標準スペック端末 Galaxy S3α (Android 4.1.1) Android 弱スペック端末 HTC Desire (Android 2.3.6 Custom ROM) Android 超弱スペック端末

57. 57 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニングスクロールした際の挙動不安定、描画遅延 touchstart: 14ms touchmove: 3ms touchend: 38ms 平均的な処理時間(PC Chrome) SP上ではおおよそ2倍以上の処理時間 touchstart: 32ms~ touchmove: 20ms~ touchend: 80ms~

60. 60 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニングスクロールした際の挙動不安定、描画遅延(答) jQuery.fn.cssメソッドに変わるjQuery.fn.fastCssメソッドを実装し既存実装をリプレイス jQuery.fn.css メソッド = 超便利ベンダープレフィックス, 単位の付加まぁなんかあと色々(ごめんなさいあんまり知りません) ! でもいらない ! そういうのは遅いので予めコードに書きましょうある意味でインライン展開より低層のDOM APIを直接叩くことで処理速度とヒープを削減

61. 61 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニングスクロールした際の挙動不安定、描画遅延(答) イベント毎に要素の大きさをjQuery.height()などのメソッドから取得していたものをキャッシュ DOM Elementへのwidth, heightなどのアクセスはRecalculate Styleをさせてしまうため、要素のサイズがイベント毎に変化するなどの特殊な場合を除いて、一度取得した後はその値をキャッシュし再利用することで無駄なRecalculate Styleの発生を抑制した before aner

63. 63 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニングスクロールした際の挙動不安定、描画遅延(答) 独自実装していた closest() メソッドでの親DOM要素の走査ロジックを変更ターゲットの要素から.parentNodeをたどり次々に走査していたが、 Node.compareDocumentPosiLonを用いて親要素から子要素の位置を特定する方式に切り替えた before aner

67. 67 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング touchstart: 5ms touchmove: 1.5ms touchend: 3ms PC Chrome SP(iPhone5) touchstart: 15ms~ touchmove: 10ms~ touchend: 20ms~ スクロールした際の挙動不安定、描画遅延(答) touchstart: 14ms touchmove: 3ms touchend: 20ms touchstart: 32ms~ touchmove: 20ms~ touchend: 80ms~ おおよそ50%程度の改善

70. 70 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング意図しない合成レイヤーとスタイル再描画 The Chromium Project examples are licensed under the BSD License. h=p://www.chromium.org/developers/design- -documents/gpu- -accelerated- -composiLng- -in- -chrome CPU GPU DOMオブジェクトをレンダリングする際に、いくつかのオブジェクトをまとめてレイヤー分けを行い、GPUに転送して合成する

71. 71 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング意図しない合成レイヤーとスタイル再描画 3Dもしくはパースペクティブのtransformを行うCSSプロパティを使用したときハードウェアデコーダを使用した<video>要素 3D (WebGL) コンテキスト、もしくはハードウェアアクセラレーションを有効にした状態での2Dコンテキストを使用した<canvas>要素 Compositorを利用するプラグイン(例:Flash) opacityもしくはtransformを使用したCSSアニメーション CSS Filterを使用した要素その要素の子孫の要素が合成レイヤーを持つときその要素よりz- -indexが低い兄弟要素が合成レイヤーを持つとき参考: h=p://www.html5rocks.com/en/tutorials/speed/layers/

72. 72 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング意図しない合成レイヤーとスタイル再描画詳しくは Chromium のソースを見るのが一番早いです ←ComposiLng Reasons そのレイヤーが生成された理由

73. 73 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング意図しない合成レイヤーとスタイル再描画合成レイヤー過多の場合に起こりうる問題 GPUメモリが枯渇して再描画が発生する大きい範囲をtransformさせる, 壮絶な枚数の合成レイヤーを作る VRAM の限度は Chrome であれば FPS の表示オプションで見れます ! ! ! ! 合成レイヤー同士がぶつかり再描画が発生するぶつかる理由は様々… な部分も Android 4.x系はバージョンによってすごく難あり 4.4.2系のChromium Webview(Chrome30?)が特に危険 SP実機では64MB~で様々

77. 77 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング意図しない合成レイヤーとスタイル再描画(答) DOMツリーを、レイヤーベースで再構築よくあるDOM構築パターン表示物を羅列して z- -indexで整えるレイヤーでの構築パターン表示物ごとに親のレイヤーを決めコンテンツごとに入れる場所を変える

79. 79 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング意図しない合成レイヤーとスタイル再描画(答) posiLon: xedの指定された要素を減らすそもそも必要の無いposiLon: xedが指定された要素が多数あったので削除 ! opacity指定による非表示要素もしくは画面外要素を display:none(or visibility:hidden)とする opacityの指定による非表示だけではDOMのレンダリングツリーに乗ってしまうので、明示的にDOMレンダリングツリーから削除した

81. 81 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニングその他 - - レンダリングを早くする 100万ピクセルを超えるスプライト画像の分割とOSバージョンごとの画像サイズの切り分け 2x, 1.5xサイズをOSによって使い分ける 100万ピクセルを超える(1000x1000以上)のスプライト画像はレンダリングへのインパクトがそれなりに大きい ! CSSで表現されている、一部の角丸やシャドウなどを低スペック端末では使用しないようにした GPUが効かない端末(Android2.x)は特に有効

82. 82 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニングその他 - - ブラクラ剥がし忘れているevent listenerの削除平均 5 listeners / scene は存在していた ! メモリリークの解消 h=p://qiita.com/damele0n/items/78d6bc431c69ede21701 とくにDOM要素や画像のメモリリークはインパクト大

83. 83 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved. まとめプロファイリングツールについての理解を深めて活用をただ数値を計測するだけではなく、プロファイリングのシナリオを決めて実施するアプリケーションの動作保証端末でスペックが一番低いものを使って定期的に確認するパフォーマンスチューニングは楽じゃない制作期間に見積もりを入れておく時にはdirtyな解決策もジリ貧の戦いになったら、コードの綺麗さ < UX ブラウザの内部は基本的にUncontrollable. しかし、挙動を理解すれば怖くないブラウザの気持ちになって

84. 84 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 参考文献 h=p://www.chromium.org/developers/design- -documents/gpu- -accelerated- -composiLng- -in- - chrome h=p://blog.cacoo.com/ja/2013/06/03/web- -paint- -performance/ h=p://havelog.ayumusato.com/develop/performance/e556- - composiLng_border_and_layer.html h=ps://speakerdeck.com/ahomu/web- -frontend- -rendering- -performance- -knowledge- -and- -Lps h=ps://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/ The_stacking_context h=p://www.html5rocks.com/en/tutorials/speed/layers/ h=p://www.html5rocks.com/en/tutorials/speed/scrolling/ h=p://www.ibm.com/developerworks/jp/web/library/wa- -jsmemory/ h=ps://github.com/thlorenz/v8- -perf/blob/master/gc.md

Effective web performance tuning for smartphone

関連スライド

「Effective web performance tuning for smartphone」の内容

このスライドを共有する