![Page 1: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/1.jpg)
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Effective Web Browser Performance Tuning for Smartphone
1
Dec 16, 2014 !Kei Takahashi [email protected] Game Development Infrastructure Gr.DeNA Co., Ltd.
~FINAL FANTASY Record Keeper の軌跡~
![Page 2: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/2.jpg)
自己紹介
2
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
高橋 慧 (たかはし けい) Japanリージョン ゲーム事業本部
技術・編成部 ゲーム開発基盤グループ(GDI)所属
Web Frontend Engineer といいつつ最近はアプリにお熱
!お仕事は、主に共通開発系のタスクと消防士系がメイン
!略歴 • 2008 ~ : Web制作会社を転々とする
• デザインからインフラまで、何でも屋
• 2010 ~ 2011: 面白法人KAYACに所属 • Web Frontend, Unity 面白業
• 2012 ~ : 株式会社ディー・エヌ・エーに所属
![Page 3: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/3.jpg)
3Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
• Smartphone Webのためのプロファイリングツール • Smartphone Webパフォーマンスチューニングの基本原則 • 『FINAL FANTASY Record Keeper』で学ぶSmartphone Webパフォーマンスチューニング
アジェンダ
以降のスライドでは、特に記載の無い場合 Smartphone = SP と省略します。
![Page 4: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/4.jpg)
Smartphone Webのための プロファイリングツール
4Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 5: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/5.jpg)
5Copyright (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/
![Page 6: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/6.jpg)
6Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
SP Webのためのプロファイリングツール
In smartphone browsers?
![Page 7: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/7.jpg)
SP Webのためのプロファイリングツール
7
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Browser WebViewiOS 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 が強力
![Page 8: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/8.jpg)
8
SP Webのためのプロファイリングツール
iOSCopyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 9: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/9.jpg)
9Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
SP Webのためのプロファイリングツール
Timeline ブラウザの動作を時系列で表示するプロファイラ!• Network
• ネットワーク周りのモニタリングと統計情報 • Rendering
• レンダリングにまつわる処理の統計情報 • JavaScript & Event
• JavaScript, DOM Eventにまつわる処理の統計情報
Safari (with Remote Inspector)
![Page 10: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/10.jpg)
10Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
SP Webのためのプロファイリングツール
Debug Menu(Mac Only) • Browser Cacheブラウザの持つ様々なキャッシュの状態を表示
• RealLme Networkリアルタイムなネットワークの統計情報
• Back/Forward Page Cacheページキャッシュの統計情報?
• Frame Rateページ表示中のフレームレートを表示
Safari
![Page 11: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/11.jpg)
11Copyright (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
![Page 12: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/12.jpg)
12Copyright (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 AnalysisOpen GL ESの統計と問題の検知
Instruments
![Page 13: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/13.jpg)
13
SP Webのためのプロファイリングツール
AndroidCopyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 14: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/14.jpg)
14Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
SP Webのためのプロファイリングツール
Chrome (with Remote Inspector)• Networkネットワーク周りのモニタリングと統計情報
• Timeline ブラウザの動作を時系列で表示するプロファイラ
• JavaScript CPU ProfileJavaScriptの実行によるCPUの使用時間統計
• Heap Snapshotブラウザが確保するヒープメモリのスナップショット
• Heap AllocaLons ブラウザによるヒープメモリの確保状況を表示
![Page 15: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/15.jpg)
15Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
SP Webのためのプロファイリングツール
• Rendering OpLonレンダリングにまつわるオプション機能
• Show paint rectanglesペイントが行われている範囲の表示
• Show composited layer borders合成レイヤー範囲の表示
• Show FPS meterFPSを表示
• Show potenLal scroll bo=lenecks スクロール時のボトルネックとなりうる原因を表示
Chrome (with Remote Inspector)
![Page 16: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/16.jpg)
16Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
SP Webのためのプロファイリングツール
• Canvas FrameCanvas 2D Contextに対する描画命令を表示
• Layers ブラウザがレンダリングを行う際の合成レイヤーを表示
• chrome://tracingChromeの動作にまつわるプロセスの全てをトレース
統計情報を表示する(最強)
Chrome (with Remote Inspector)
Chrome (PC Only)
![Page 17: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/17.jpg)
17Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
SP Webのためのプロファイリングツール
• System InformaLon ハードウェア動作の統計情報 • CPU Load • Memory usage • Frame Render Time
Android Device Monitor
![Page 18: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/18.jpg)
18Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
SP Webのためのプロファイリングツール まとめ
• Safari, Chrome の Remote Inspectorは強力
• 各プロファイラを適材適所に使おう • いずれも開発版を使うのがオススメ
• Safari -‐> Webkit Nightly Build • Chrome -‐> Chrome Canary • ただ、たまにバグってる場合も…
• ネイティブデバッガはハードウェア情報を見るのに役立つ
![Page 19: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/19.jpg)
Smartphone Web パフォーマンスチューニングの
基本原則
19Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 20: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/20.jpg)
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
![Page 21: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/21.jpg)
SP Webパフォーマンスチューニングの基本原則
21
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Too many devices.
Too many OSs.
Too many browsers.
![Page 22: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/22.jpg)
22
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
PC (Chrome)
Smartphone
アプリ全体の計測, ベンチマーキング
チューニング
端末, OSごとのエッジケースな問題
個別のシューティング
SP Webパフォーマンスチューニングの基本原則
![Page 23: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/23.jpg)
23
1. [PC]Timelineプロファイラでボトルネックの検知
2. [SP]発見したボトルネックが各SP上でどのような影響をもたらしているかを計測
3. 効果範囲を検討し、改善の判断をする
4. [PC]各プロファイラを用いながら改修 • 実装の改修はもちろん、必要であれば追加実装
5. [SP]改善を確認
問題検知と改善のワークフローSP Webパフォーマンスチューニングの基本原則
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 24: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/24.jpg)
24
Timelineプロファイラでボトルネックの検知SP Webパフォーマンスチューニングの基本原則
計測や改善の6-‐7割はTimelineプロファイラで片付く
=プロファイリングのキモ
しかし…
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 25: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/25.jpg)
25
SP Webパフォーマンスチューニングの基本原則
情報が多すぎる
Timelineプロファイラでボトルネックの検知
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 26: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/26.jpg)
26
SP Webパフォーマンスチューニングの基本原則
ポイント:
ユーザの操作行動ベースでプロファイリングする シナリオを決め、計測する
ex: • 画面が読み込まれ、表示された(ローディング) • 特定の箇所をクリックした • 10秒間画面を表示したまま待機
• 10秒間画面をスクロールした • 画面内のタブを選び、コンテンツを切り替えた
Timelineプロファイラでボトルネックの検知
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 27: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/27.jpg)
27
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 28: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/28.jpg)
28
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知
情報が 多すぎる
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 29: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/29.jpg)
29
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知
本当は教えたくない
“コツ” 今日は教えちゃいます。
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 30: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/30.jpg)
30
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知• Self Time(処理時間)が20msを超えている
• JavaScript:純粋に重い処理なのか、無駄な処理が含まれていないか !
•Rendering, Pain\ng:画像のデコード処理などの重い処理以外(通常のCSSやスタイル変更など)で20ms超えるのであれば何らかの対策をとる
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 31: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/31.jpg)
31
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知• 一定の間隔で似たような処理が行われている
• JavaScript:setInterval, setTimeout, requestAnimaLonFrameなどの呼び出しが考えられるが、ループ処理内で無駄な処理を行っていないか !
•Rendering, Pain\ng:特にrecalculate styleが走り続けるなどが見受けられる場合、CSSアニメーションによる描画の阻害、もしくはJavaScriptからのDOM要素のスタイルプロパティへの連続的なget,setが行われていないか
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 32: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/32.jpg)
32
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知• 高頻度のイベント内で、DOMのCSSスタイルなど描画に関わるプロパティへのアクセスをしている • ありがちなのが高頻度イベント内でのCSS変更, DOM要素の特定プロパティへのアクセス
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
• 高頻度イベント代表例
A. scroll event B. touchmove, mousemove event C. devicemoLon event
• DOMプロパティ代表例
A. offset (Top | Len | Width | Height) B. scroll (Top | Len | Width | Height) C. client (Top | Len | Width | Height) D. getComputedStyle()
![Page 33: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/33.jpg)
33
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知• 5MBを超える大きなGCが走っている
• GC前にヒープを大量に消費するような重い処理がある可能性が高い • ムダなロジックでヒープ食いつぶしていないか?
• 世代別GCのold generaLon側のGCが走る時は少なくとも100msはブロックされるので、できれば頻度は抑えたい • old generaLonに入りやすい(絶対?)のは、DOM要素などのヒープの確保サイズが大きいもの
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 34: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/34.jpg)
34
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知• 下部の Heap, Element, Listener グラフが増え続けている
•特にSingle Page ApplicaLonで使用済みの event listener の解放がされていない
•メモリリークを抱えている
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 35: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/35.jpg)
35
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知• Chrome Extension(拡張機能)による処理は除外
• 詳細ウィンドウの左側カラムのリストに(VM????? extensions:???)などの記載があればChrome Extensionsの処理なので除外する
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 36: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/36.jpg)
36
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知
• Self Time(処理時間)が20msを超えている • 一定の間隔で似たような処理が行われている • 高頻度のイベント内でスタイルプロパティへのアクセス
• 5MBを超える大きなGCが走っている
• 下部の Heap, Element, Listener グラフが増え続けている
• Chrome Extension(拡張機能)による処理は除外
これでだけ抑えれば8割の問題は発見できますCopyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 37: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/37.jpg)
37
SP Webパフォーマンスチューニングの基本原則
ボトルネックに対するシューティング
• Network • JavaScript CPU Profile • Heap Snapshot • Heap Alloca\ons • Rendering Op\on • Canvas Frame • Layers
!
などの各プロファイラでシューティングをCopyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 38: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/38.jpg)
FINAL FANTASY Record Keeper
(FFRK) で学ぶ SP Web パフォーマンスチューニング
38Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
![Page 39: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/39.jpg)
39Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
前回資料より
![Page 40: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/40.jpg)
40Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
めっちゃ面白い (実際は笑えません)
![Page 41: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/41.jpg)
41Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
構成概要
内製フレームワーク Kickmotor
![Page 42: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/42.jpg)
42Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
構成概要
WebView
Backbone Model, Scene(Controller)
Backbone View
Underscore TemplateCSS(SCSS)
⇔
Rendered HTML
←
![Page 43: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/43.jpg)
43Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
チューニングほぼゼロ
![Page 44: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/44.jpg)
44Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
ざっと見た結果(当時のメモ)
JS code
列をまったファイルの置換処理などはかなり負担ががが。およそかのスタイルプロパティにアクセスしている?。ヒープの消費が激しく、およそ度が上がりそう。モデルやデータクラスなどの不要なインスタンスの解放がされているかどうかが怪しい。メモリリークは間違いなくしてそう。Android
る) CPU
レンダリング時間かかりすぎ。スプライト大きすぎる?transform
ぬーーーー。
無理かも…
![Page 45: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/45.jpg)
45Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
![Page 46: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/46.jpg)
46Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
ベンチマーク端末• iPhone5 (iOS7.0)
• iOS 標準スペック端末
• Nexus 5 (Android4.4.2) • iOS 標準スペック端末
• HTC J Bueerfly (Android 4.2) • Android 標準スペック端末
• Galaxy S3α (Android 4.1.1) • Android 弱スペック端末
• HTC Desire (Android 2.3.6 Custom ROM) • Android 超弱スペック端末
![Page 47: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/47.jpg)
47Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
注意
マジでジリ貧の戦いだった ので、そこまでやるの? みたいなこともやります
![Page 48: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/48.jpg)
48Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
特定の周期で呼ばれ続けるrecalculate style
![Page 49: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/49.jpg)
49Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
この間60fps
特定の周期で呼ばれ続ける recalculate style
![Page 50: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/50.jpg)
50Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
特定の周期で呼ばれ続ける recalculate style
• 画面外、もしくはz-‐index layerが下になっているなど、見えない場所でCSSアニメーションが走り続けている • DOM ツリーに乗っている限り、レンダリングの計算がされる
!• 何らかのJavaScriptから、画面内の要素のプロパティへアクセスし、スタイルの再計算が走っている • offset (Top | Len | Width | Height) • scroll (Top | Len | Width | Height) • client (Top | Len | Width | Height) • getComputedStyle() • など(jQuery.fn.cssが内部で暗黙的に実行してる場合も)
![Page 51: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/51.jpg)
51Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
答え合わせ
![Page 52: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/52.jpg)
52Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
特定の周期で呼ばれ続ける recalculate style(答)
• デシ君のローディングアニメがDOM Treeに常に存在した • display: none として改善
![Page 53: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/53.jpg)
53Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の 挙動不安定、描画遅延
![Page 54: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/54.jpg)
54Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延
touchmoveごとに何らかの処理が行われている
![Page 55: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/55.jpg)
55Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延
1スクロールごとにGCが…
タッチ-‐>動かす-‐>離すで一山
![Page 56: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/56.jpg)
56Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延
スクロール時80%~, アイドル時20%~
![Page 57: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/57.jpg)
57Copyright (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~
![Page 58: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/58.jpg)
58Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延コールスタックからどのメソッドがどのくらい呼ばれているのかを徹底的に洗い出す
![Page 59: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/59.jpg)
59Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
答え合わせ
![Page 60: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/60.jpg)
60Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延(答)
• jQuery.fn.cssメソッドに変わるjQuery.fn.fastCssメソッドを実装し既存実装をリプレイス • jQuery.fn.css メソッド = 超便利
• ベンダープレフィックス, 単位の付加
• まぁなんかあと色々(ごめんなさいあんまり知りません)
!でもいらない
!• そういうのは遅いので予めコードに書きましょう
• ある意味でインライン展開 • より低層のDOM APIを直接叩くことで処理速度とヒープを削減
![Page 61: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/61.jpg)
61Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延(答)
• イベント毎に要素の大きさをjQuery.height()などのメソッドから取得していたものをキャッシュ • DOM Elementへのwidth, heightなどのアクセスはRecalculate Styleをさせてしまうため、要素のサイズがイベント毎に変化するなどの特殊な場合を除いて、一度取得した後はその値をキャッシュし再利用することで無駄なRecalculate Styleの発生を抑制した
before aner
![Page 62: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/62.jpg)
62Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延(答)
• 同一のQueryStringによるelement探索結果をキャッシュ • jQuery object などをキャッシュすることで、余計なメソッドコールと
DOM走査を削減
before aner
![Page 63: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/63.jpg)
63Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延(答)
• 独自実装していた closest() メソッドでの親DOM要素の走査ロジックを変更 • ターゲットの要素から.parentNodeをたどり次々に走査していたが、
Node.compareDocumentPosiLonを用いて親要素から子要素の位置を特定する方式に切り替えた
before aner
![Page 64: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/64.jpg)
64Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延(答)
• 各イベントハンドラで同一オブジェクト生成の削減 • コード内の多数の箇所にて同一の値に対してWebKitCSSMatrixオブジェクトを生成していたので、キャッシュを行った
before
aner
![Page 65: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/65.jpg)
65Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延(答)
• イベントハンドラとしてjQuery.proxy(FuncLon.bind)で生成した関数を登録していたが、無名関数からのcontext参照での呼び出しに変更した
before
aner
![Page 66: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/66.jpg)
66Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロール時55%~, アイドル時~10%
スクロールした際の挙動不安定、描画遅延(答)
※特定の間隔で呼ばれ続けるRecalculate Styleの改修含む
![Page 67: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/67.jpg)
67Copyright (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%程度の改善
![Page 68: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/68.jpg)
68Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤー生成とスタイル再描画
![Page 69: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/69.jpg)
69Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤー生成とスタイル再描画
![Page 70: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/70.jpg)
70Copyright (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に転送して合成する
![Page 71: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/71.jpg)
71Copyright (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/
![Page 72: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/72.jpg)
72Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画
詳しくは Chromium のソース を見るのが一番早いです
←ComposiLng Reasons そのレイヤーが生成された理由
![Page 73: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/73.jpg)
73Copyright (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~で様々
![Page 74: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/74.jpg)
74Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画合成レイヤーが発生している理由を徹底的に洗い出す
![Page 75: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/75.jpg)
75Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画
合成レイヤーを表示して どのレイヤーがぶつかってしまうのかを目視で調べる
![Page 76: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/76.jpg)
76Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
答え合わせ
![Page 77: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/77.jpg)
77Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画(答)
• DOMツリーを、レイヤーベースで再構築よくあるDOM構築パターン表示物を羅列して z-‐indexで整える
レイヤーでの構築パターン表示物ごとに親のレイヤーを決め コンテンツごとに入れる場所を変える
![Page 78: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/78.jpg)
78Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画(答)
• DOMツリーを、レイヤーベースで再構築
全画面のDIVを複数枚重ねて表示位置ごとに要素をレイヤー内へ配置する
![Page 79: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/79.jpg)
79Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画(答)
• posiLon:fixedの指定された要素を減らす • そもそも必要の無いposiLon:fixedが指定された要素が多数あったので削除
!• opacity指定による非表示要素もしくは画面外要素をdisplay:none(or visibility:hidden)とする • opacityの指定による非表示だけではDOMのレンダリングツリーに乗ってしまうので、明示的にDOMレンダリングツリーから削除した
![Page 80: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/80.jpg)
80Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画(答)
VRAMへのインパクトは少ないものの再描画頻度が激減
![Page 81: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/81.jpg)
81Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
その他 -‐ レンダリングを早くする• 100万ピクセルを超えるスプライト画像の分割とOSバージョンごとの画像サイズの切り分け • 2x, 1.5xサイズをOSによって使い分ける
• 100万ピクセルを超える(1000x1000以上)のスプライト画像はレンダリングへのインパクトがそれなりに大きい
!• CSSで表現されている、一部の角丸やシャドウなどを低スペック端末では使用しないようにした • GPUが効かない端末(Android2.x)は特に有効
![Page 82: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/82.jpg)
82Copyright (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要素や画像のメモリリークはインパクト大
![Page 83: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/83.jpg)
83Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
まとめ
• プロファイリングツールについての理解を深めて活用を • ただ数値を計測するだけではなく、プロファイリングのシナリオを決めて実施する
• アプリケーションの動作保証端末でスペックが一番低いものを使って定期的に確認する
• パフォーマンスチューニングは楽じゃない • 制作期間に見積もりを入れておく
• 時にはdirtyな解決策も
• ジリ貧の戦いになったら、コードの綺麗さ < UX
• ブラウザの内部は基本的にUncontrollable. しかし、挙動を理解すれば怖くない • ブラウザの気持ちになって
![Page 84: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/84.jpg)
84Copyright (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
![Page 85: Effective web performance tuning for smartphone](https://reader030.vdocuments.site/reader030/viewer/2022020218/55a564d21a28ab1f0c8b45e4/html5/thumbnails/85.jpg)
85Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
ご静聴ありがとうございました