SlideShare une entreprise Scribd logo
1  sur  85
Télécharger pour lire hors ligne
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Effective
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
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
	
  	
  	
  	
  	
  	
  高橋	
  慧	
  (たかはし	
  けい)	
  
Japanリージョン	
  ゲーム事業本部	
  
技術・編成部	
  ゲーム開発基盤グループ(GDI)所属	
  
Web	
  Frontend	
  Engineer	
  といいつつ最近はアプリにお熱	
  
!
お仕事は、主に共通開発系のタスクと消防士系がメイン	
  
!
略歴	
  
• 2008	
  ~	
  :	
  Web制作会社を転々とする	
  
• デザインからインフラまで、何でも屋	
  
• 2010	
  ~	
  2011:	
  面白法人KAYACに所属	
  
• Web	
  Frontend,	
  Unity	
  面白業	
  
• 2012	
  ~	
  :	
  株式会社ディー・エヌ・エーに所属
3
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
• Smartphone Webのためのプロファイリングツール
• Smartphone Webパフォーマンスチューニングの基本原則
• 『FINAL FANTASY Record Keeper』で学ぶ

Smartphone Webパフォーマンスチューニング
アジェンダ
以降のスライドでは、特に記載の無い場合	
  Smartphone	
  =	
  SP	
  と省略します。
Smartphone Webのための
プロファイリングツール
4
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
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/
6
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
SP Webのためのプロファイリングツール
In smartphone
browsers?
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	
  が強力
8
SP Webのためのプロファイリングツール
iOS
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
9
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
SP Webのためのプロファイリングツール
Timeline	
  
ブラウザの動作を時系列で表示するプロファイラ!
• Network	
  
• ネットワーク周りのモニタリングと統計情報	
  
• Rendering	
  
• レンダリングにまつわる処理の統計情報	
  
• JavaScript	
  &	
  Event	
  
• JavaScript,	
  DOM	
  Eventにまつわる処理の統計情報
Safari	
  (with	
  Remote	
  Inspector)
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
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
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
13
SP Webのためのプロファイリングツール
Android
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
14
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
SP Webのためのプロファイリングツール
Chrome	
  (with	
  Remote	
  Inspector)
• Network

ネットワーク周りのモニタリングと統計情報	
  
• Timeline

ブラウザの動作を時系列で表示するプロファイラ	
  
• JavaScript	
  CPU	
  Profile

JavaScriptの実行によるCPUの使用時間統計	
  
• Heap	
  Snapshot

ブラウザが確保するヒープメモリのスナップショット	
  
• Heap	
  AllocaLons

ブラウザによるヒープメモリの確保状況を表示
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
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)
17
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
SP Webのためのプロファイリングツール
• System	
  InformaLon

ハードウェア動作の統計情報	
  
• CPU	
  Load	
  
• Memory	
  usage	
  
• Frame	
  Render	
  Time
Android	
  Device	
  Monitor
18
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
SP Webのためのプロファイリングツール まとめ
• Safari,	
  Chrome	
  の	
  Remote	
  Inspectorは強力	
  
• 各プロファイラを適材適所に使おう	
  
• いずれも開発版を使うのがオススメ	
  
• Safari	
  -­‐>	
  Webkit	
  Nightly	
  Build	
  
• Chrome	
  -­‐>	
  Chrome	
  Canary	
  
• ただ、たまにバグってる場合も…	
  
• ネイティブデバッガはハードウェア情報を
見るのに役立つ
Smartphone Web
パフォーマンスチューニングの
基本原則
19
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
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
SP Webパフォーマンスチューニングの基本原則
21
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Too	
  many	
  devices.	
  
Too	
  many	
  OSs.	
  
Too	
  many	
  browsers.
22
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
PC(Chrome)
Smartphone
アプリ全体の計測,	
  ベンチマーキング	
  
チューニング
端末,	
  OSごとのエッジケースな問題	
  
個別のシューティング
SP Webパフォーマンスチューニングの基本原則
23
1. [PC]Timelineプロファイラでボトルネックの検知	
  
2. [SP]発見したボトルネックが各SP上でどのような

影響をもたらしているかを計測	
  
3. 効果範囲を検討し、改善の判断をする	
  
4. [PC]各プロファイラを用いながら改修	
  
• 実装の改修はもちろん、必要であれば追加実装	
  
5. [SP]改善を確認
問題検知と改善のワークフロー
SP Webパフォーマンスチューニングの基本原則
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
24
Timelineプロファイラでボトルネックの検知
SP Webパフォーマンスチューニングの基本原則
計測や改善の6-­‐7割はTimelineプロファイラで片付く	
  
=プロファイリングのキモ
しかし…
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
25
SP Webパフォーマンスチューニングの基本原則
情報が多すぎる
Timelineプロファイラでボトルネックの検知
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
26
SP Webパフォーマンスチューニングの基本原則
ポイント:	
  
ユーザの操作行動ベースでプロファイリングする	
  
シナリオを決め、計測する	
  
ex:	
  
• 画面が読み込まれ、表示された(ローディング)	
  
• 特定の箇所をクリックした	
  
• 10秒間画面を表示したまま待機	
  
• 10秒間画面をスクロールした	
  
• 画面内のタブを選び、コンテンツを切り替えた
Timelineプロファイラでボトルネックの検知
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
27
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
28
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知
情報が	
  
多すぎる
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
29
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知
本当は教えたくない	
  
“コツ”	
  
今日は教えちゃいます。
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
30
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知
• Self	
  Time(処理時間)が20msを超えている	
  
• JavaScript:

純粋に重い処理なのか、無駄な処理が含まれていないか	
  
!
• Rendering,	
  Painng:

画像のデコード処理などの重い処理以外(通常のCSSやスタイ
ル変更など)で20ms超えるのであれば何らかの対策をとる
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
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.
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()
33
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知
• 5MBを超える大きなGCが走っている	
  
• GC前にヒープを大量に消費するような重い処理がある可能性が高い	
  
• ムダなロジックでヒープ食いつぶしていないか?	
  
• 世代別GCのold	
  generaLon側のGCが走る時は少なくとも100msはブ
ロックされるので、できれば頻度は抑えたい	
  
• old	
  generaLonに入りやすい(絶対?)のは、DOM要素などのヒープ
の確保サイズが大きいもの
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
34
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知
• 下部の	
  Heap,	
  Element,	
  Listener	
  グラフが増え続けている	
  
• 特にSingle	
  Page	
  ApplicaLonで使用済みの	
  event	
  listener	
  の解放がされて
いない	
  
• メモリリークを抱えている
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
35
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知
• Chrome	
  Extension(拡張機能)による処理は除外	
  
• 詳細ウィンドウの左側カラムのリストに(VM?????	
  extensions:???)な
どの記載があればChrome	
  Extensionsの処理なので除外する
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
36
SP Webパフォーマンスチューニングの基本原則
Timelineプロファイラでボトルネックの検知
• Self	
  Time(処理時間)が20msを超えている	
  
• 一定の間隔で似たような処理が行われている	
  
• 高頻度のイベント内でスタイルプロパティへのアクセ
ス	
  
• 5MBを超える大きなGCが走っている	
  
• 下部の	
  Heap,	
  Element,	
  Listener	
  グラフが増え続けている	
  
• Chrome	
  Extension(拡張機能)による処理は除外
これでだけ抑えれば8割の問題は発見できます
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
37
SP Webパフォーマンスチューニングの基本原則
ボトルネックに対するシューティング
• Network	
  
• JavaScript	
  CPU	
  Profile	
  
• Heap	
  Snapshot	
  
• Heap	
  Allocaons	
  
• Rendering	
  Opon	
  
• Canvas	
  Frame	
  
• Layers	
  
!
などの各プロファイラでシューティングを
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FINAL FANTASY
Record Keeper
(FFRK) で学ぶ SP Web
パフォーマンスチューニング
38
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
39
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
前回資料より
40
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
めっちゃ面白い	
  
(実際は笑えません)
41
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
構成概要
内製フレームワーク	
  Kickmotor
42
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
構成概要
WebView
Backbone	
  Model,	
  Scene(Controller)
Backbone	
  View
Underscore	
  Template
CSS(SCSS)
Rendered	
  HTML
←
43
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
チューニングほぼゼロ
44
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
ざっと見た結果(当時のメモ)
JS	
  code	
  
列を
まったファイルの置換処理などはかなり負担ががが。
およそ
かのスタイルプロパティにアクセスしている?。
ヒープの消費が激しく、およそ
度が上がりそう。
モデルやデータクラスなどの不要なインスタンスの解放がされているかどうかが怪し
い。メモリリークは間違いなくしてそう。
Android
る)	
  CPU
レンダリング時間かかりすぎ。スプライト大きすぎる?
transform
ぬーーーー。
無理かも…
45
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
46
Copyright (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	
  超弱スペック端末
47
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
注意
マジでジリ貧の戦いだった	
  
ので、そこまでやるの?	
  
みたいなこともやります
48
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
特定の周期で呼ばれ続ける
recalculate	
  style	
  
49
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
この間60fps
特定の周期で呼ばれ続ける	
  recalculate	
  style	
  
50
Copyright (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が内部で暗黙的に実行してる場合も)
51
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
答え合わせ
52
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
特定の周期で呼ばれ続ける	
  recalculate	
  style(答)	
  
• デシ君のローディングアニメがDOM	
  Treeに常に存在し
た	
  
• display:	
  none	
  として改善
53
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の	
  
挙動不安定、描画遅延
54
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延
touchmoveごとに何らかの処理が行われている
55
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延
1スクロールごとにGCが…
タッチ-­‐>動かす-­‐>離すで一山
56
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延
スクロール時80%~,	
  アイドル時20%~
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~
58
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延
コールスタックからどのメ
ソッドがどのくらい呼ばれ
ているのかを徹底的に洗い
出す
59
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
答え合わせ
60
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延(答)
• jQuery.fn.cssメソッドに変わるjQuery.fn.fastCssメソッドを実
装し既存実装をリプレイス	
  
• jQuery.fn.css	
  メソッド	
  =	
  超便利	
  
• ベンダープレフィックス,	
  単位の付加	
  
• まぁなんかあと色々(ごめんなさいあんまり知りません)	
  
!
でもいらない	
  
!
• そういうのは遅いので予めコードに書きましょう	
  
• ある意味でインライン展開	
  
• より低層のDOM	
  APIを直接叩くことで処理速度とヒープを削減
61
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延(答)
• イベント毎に要素の大きさをjQuery.height()などのメソッド
から取得していたものをキャッシュ	
  
• 	
  DOM	
  Elementへのwidth,	
  heightなどのアクセスはRecalculate	
  Styleをさ
せてしまうため、要素のサイズがイベント毎に変化するなどの特殊
な場合を除いて、一度取得した後はその値をキャッシュし再利用す
ることで無駄なRecalculate	
  Styleの発生を抑制した
before aner
62
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延(答)
• 同一のQueryStringによるelement探索結果をキャッシュ	
  
• jQuery	
  object	
  などをキャッシュすることで、余計なメソッドコールと
DOM走査を削減	
  
before aner
63
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延(答)
• 独自実装していた	
  closest()	
  メソッドでの親DOM要素の走査
ロジックを変更	
  
• ターゲットの要素から.parentNodeをたどり次々に走査していたが、
Node.compareDocumentPosiLonを用いて親要素から子要素の位置を特
定する方式に切り替えた	
  
before aner
64
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延(答)
• 各イベントハンドラで同一オブジェクト生成の削減	
  
• コード内の多数の箇所にて同一の値に対してWebKitCSSMatrixオブ
ジェクトを生成していたので、キャッシュを行った
before
aner
65
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロールした際の挙動不安定、描画遅延(答)
• イベントハンドラとしてjQuery.proxy(FuncLon.bind)で生成し
た関数を登録していたが、無名関数からのcontext参照での
呼び出しに変更した
before
aner
66
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
スクロール時55%~,	
  アイドル時~10%
スクロールした際の挙動不安定、描画遅延(答)
※特定の間隔で呼ばれ続けるRecalculate	
  Styleの改修含む
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%程度の改善
68
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤー生成
とスタイル再描画
69
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤー生成とスタイル再描画
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
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
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画
詳しくは	
  Chromium	
  のソース	
  を見るのが一番早いです
←ComposiLng	
  Reasons	
  
そのレイヤーが生成された理由
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~で様々
74
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画
合成レイヤーが発生し
ている理由を徹底的に
洗い出す
75
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画
合成レイヤーを表示して	
  
どのレイヤーがぶつかってしまう
のかを目視で調べる
76
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
答え合わせ
77
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画(答)
• DOMツリーを、レイヤーベースで再構築
よくあるDOM構築パターン
表示物を羅列して	
  
z-­‐indexで整える
レイヤーでの構築パターン
表示物ごとに親のレイヤーを決め	
  
コンテンツごとに入れる場所を変える
78
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画(答)
• DOMツリーを、レイヤーベースで再構築
全画面のDIVを複数枚重ねて表
示位置ごとに要素をレイヤー内
へ配置する
79
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画(答)
• posiLon:fixedの指定された要素を減らす	
  
• そもそも必要の無いposiLon:fixedが指定された要素が多数あったので
削除	
  
!
• opacity指定による非表示要素もしくは画面外要素を
display:none(or	
  visibility:hidden)とする	
  
• opacityの指定による非表示だけではDOMのレンダリングツリーに
乗ってしまうので、明示的にDOMレンダリングツリーから削除した
80
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
FFRKで学ぶSP Webパフォーマンスチューニング
意図しない合成レイヤーとスタイル再描画(答)
VRAMへのインパクトは少ないものの再描画頻度が激減
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
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
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
まとめ
• プロファイリングツールについての理解を深めて活用を	
  
• ただ数値を計測するだけではなく、プロファイリングのシ
ナリオを決めて実施する	
  
• アプリケーションの動作保証端末でスペックが一番低いも
のを使って定期的に確認する	
  
• パフォーマンスチューニングは楽じゃない	
  
• 制作期間に見積もりを入れておく	
  
• 時にはdirtyな解決策も	
  
• ジリ貧の戦いになったら、コードの綺麗さ	
  <	
  UX	
  
• ブラウザの内部は基本的にUncontrollable.	
  しかし、挙動を
理解すれば怖くない	
  
• ブラウザの気持ちになって
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
85
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
ご静聴ありがとうございました

Contenu connexe

Tendances

FINAL FANTASY Record Keeperのマスターデータを支える技術
FINAL FANTASY Record Keeperのマスターデータを支える技術FINAL FANTASY Record Keeperのマスターデータを支える技術
FINAL FANTASY Record Keeperのマスターデータを支える技術dena_study
 
DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方dena_study
 
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)dena_study
 
ガールアックス マルチプレイのリアルタイム通信ゲーム開発入門
ガールアックス マルチプレイのリアルタイム通信ゲーム開発入門ガールアックス マルチプレイのリアルタイム通信ゲーム開発入門
ガールアックス マルチプレイのリアルタイム通信ゲーム開発入門dena_study
 
Unity開発で週イチ呑み会を支える技術
Unity開発で週イチ呑み会を支える技術Unity開発で週イチ呑み会を支える技術
Unity開発で週イチ呑み会を支える技術kazuya noshiro
 
ガールアックス:リアルタイム通信処理の効率的な実装
ガールアックス:リアルタイム通信処理の効率的な実装ガールアックス:リアルタイム通信処理の効率的な実装
ガールアックス:リアルタイム通信処理の効率的な実装dena_study
 
制作を支えたツール達 (パズル戦隊デナレンジャー)
制作を支えたツール達 (パズル戦隊デナレンジャー)制作を支えたツール達 (パズル戦隊デナレンジャー)
制作を支えたツール達 (パズル戦隊デナレンジャー)dena_study
 
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。DeNA_Creators
 
Unityネイティブプラグインマニアクス #denatechcon
Unityネイティブプラグインマニアクス #denatechconUnityネイティブプラグインマニアクス #denatechcon
Unityネイティブプラグインマニアクス #denatechconDeNA
 
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)Toshiharu Sugiyama
 
消滅都市 Cocos2d-xでの演出・UIあれこれ
消滅都市 Cocos2d-xでの演出・UIあれこれ消滅都市 Cocos2d-xでの演出・UIあれこれ
消滅都市 Cocos2d-xでの演出・UIあれこれShun Noguchi
 
CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」
CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」
CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」Web Technology Corp.
 
DeNA内製ゲームエンジンの現状と目指す未来 #denatechcon
DeNA内製ゲームエンジンの現状と目指す未来 #denatechconDeNA内製ゲームエンジンの現状と目指す未来 #denatechcon
DeNA内製ゲームエンジンの現状と目指す未来 #denatechconDeNA
 
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜Drecom Co., Ltd.
 
その後のDeNAのネイティブアプリ開発 #denatechcon
その後のDeNAのネイティブアプリ開発 #denatechconその後のDeNAのネイティブアプリ開発 #denatechcon
その後のDeNAのネイティブアプリ開発 #denatechconDeNA
 
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~Web Technology Corp.
 
DeNAの動画配信サービスを支えるインフラの内部 #denatechcon
DeNAの動画配信サービスを支えるインフラの内部  #denatechconDeNAの動画配信サービスを支えるインフラの内部  #denatechcon
DeNAの動画配信サービスを支えるインフラの内部 #denatechconDeNA
 
チラシルiOSでの広告枠開発
チラシルiOSでの広告枠開発チラシルiOSでの広告枠開発
チラシルiOSでの広告枠開発Satoshi Takano
 
DeNAの最新のマスタデータ管理システム Oyakata の全容
DeNAの最新のマスタデータ管理システム Oyakata の全容DeNAの最新のマスタデータ管理システム Oyakata の全容
DeNAの最新のマスタデータ管理システム Oyakata の全容sairoutine
 
DeNAインフラの今とこれから - 今編 -
DeNAインフラの今とこれから - 今編 -DeNAインフラの今とこれから - 今編 -
DeNAインフラの今とこれから - 今編 -Tomoya Kabe
 

Tendances (20)

FINAL FANTASY Record Keeperのマスターデータを支える技術
FINAL FANTASY Record Keeperのマスターデータを支える技術FINAL FANTASY Record Keeperのマスターデータを支える技術
FINAL FANTASY Record Keeperのマスターデータを支える技術
 
DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方
 
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
 
ガールアックス マルチプレイのリアルタイム通信ゲーム開発入門
ガールアックス マルチプレイのリアルタイム通信ゲーム開発入門ガールアックス マルチプレイのリアルタイム通信ゲーム開発入門
ガールアックス マルチプレイのリアルタイム通信ゲーム開発入門
 
Unity開発で週イチ呑み会を支える技術
Unity開発で週イチ呑み会を支える技術Unity開発で週イチ呑み会を支える技術
Unity開発で週イチ呑み会を支える技術
 
ガールアックス:リアルタイム通信処理の効率的な実装
ガールアックス:リアルタイム通信処理の効率的な実装ガールアックス:リアルタイム通信処理の効率的な実装
ガールアックス:リアルタイム通信処理の効率的な実装
 
制作を支えたツール達 (パズル戦隊デナレンジャー)
制作を支えたツール達 (パズル戦隊デナレンジャー)制作を支えたツール達 (パズル戦隊デナレンジャー)
制作を支えたツール達 (パズル戦隊デナレンジャー)
 
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。
 
Unityネイティブプラグインマニアクス #denatechcon
Unityネイティブプラグインマニアクス #denatechconUnityネイティブプラグインマニアクス #denatechcon
Unityネイティブプラグインマニアクス #denatechcon
 
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
 
消滅都市 Cocos2d-xでの演出・UIあれこれ
消滅都市 Cocos2d-xでの演出・UIあれこれ消滅都市 Cocos2d-xでの演出・UIあれこれ
消滅都市 Cocos2d-xでの演出・UIあれこれ
 
CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」
CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」
CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」
 
DeNA内製ゲームエンジンの現状と目指す未来 #denatechcon
DeNA内製ゲームエンジンの現状と目指す未来 #denatechconDeNA内製ゲームエンジンの現状と目指す未来 #denatechcon
DeNA内製ゲームエンジンの現状と目指す未来 #denatechcon
 
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
CEDEC 2015 Cocos2d-x と社内基盤の付き合い方 〜アップストリームファーストを目指して〜
 
その後のDeNAのネイティブアプリ開発 #denatechcon
その後のDeNAのネイティブアプリ開発 #denatechconその後のDeNAのネイティブアプリ開発 #denatechcon
その後のDeNAのネイティブアプリ開発 #denatechcon
 
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
 
DeNAの動画配信サービスを支えるインフラの内部 #denatechcon
DeNAの動画配信サービスを支えるインフラの内部  #denatechconDeNAの動画配信サービスを支えるインフラの内部  #denatechcon
DeNAの動画配信サービスを支えるインフラの内部 #denatechcon
 
チラシルiOSでの広告枠開発
チラシルiOSでの広告枠開発チラシルiOSでの広告枠開発
チラシルiOSでの広告枠開発
 
DeNAの最新のマスタデータ管理システム Oyakata の全容
DeNAの最新のマスタデータ管理システム Oyakata の全容DeNAの最新のマスタデータ管理システム Oyakata の全容
DeNAの最新のマスタデータ管理システム Oyakata の全容
 
DeNAインフラの今とこれから - 今編 -
DeNAインフラの今とこれから - 今編 -DeNAインフラの今とこれから - 今編 -
DeNAインフラの今とこれから - 今編 -
 

En vedette

Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会
Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会
Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会Eiji Sekiya
 
ICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @Dena
ICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @DenaICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @Dena
ICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @DenaTakanori Nakai
 
言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-
言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-
言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-Takahiro Kubo
 
[ICLR2017読み会 @ DeNA] ICLR2017紹介
[ICLR2017読み会 @ DeNA] ICLR2017紹介[ICLR2017読み会 @ DeNA] ICLR2017紹介
[ICLR2017読み会 @ DeNA] ICLR2017紹介Takeru Miyato
 
ICLR読み会 奥村純 20170617
ICLR読み会 奥村純 20170617ICLR読み会 奥村純 20170617
ICLR読み会 奥村純 20170617Jun Okumura
 

En vedette (9)

ブロックチェーンの仕組みと動向(入門編)
ブロックチェーンの仕組みと動向(入門編)ブロックチェーンの仕組みと動向(入門編)
ブロックチェーンの仕組みと動向(入門編)
 
Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会
Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会
Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会
 
ICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @Dena
ICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @DenaICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @Dena
ICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @Dena
 
言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-
言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-
言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-
 
医療データ解析界隈から見たICLR2017
医療データ解析界隈から見たICLR2017医療データ解析界隈から見たICLR2017
医療データ解析界隈から見たICLR2017
 
[ICLR2017読み会 @ DeNA] ICLR2017紹介
[ICLR2017読み会 @ DeNA] ICLR2017紹介[ICLR2017読み会 @ DeNA] ICLR2017紹介
[ICLR2017読み会 @ DeNA] ICLR2017紹介
 
ICLR読み会 奥村純 20170617
ICLR読み会 奥村純 20170617ICLR読み会 奥村純 20170617
ICLR読み会 奥村純 20170617
 
170614 iclr reading-public
170614 iclr reading-public170614 iclr reading-public
170614 iclr reading-public
 
Q prop
Q propQ prop
Q prop
 

Similaire à Effective web performance tuning for smartphone

Voicepic@FukuiMASeminar
Voicepic@FukuiMASeminarVoicepic@FukuiMASeminar
Voicepic@FukuiMASeminarManabu Shimobe
 
決済金融から始めるデータドリブンカンパニー
決済金融から始めるデータドリブンカンパニー決済金融から始めるデータドリブンカンパニー
決済金融から始めるデータドリブンカンパニーTokuhiro Eto
 
泥臭い運用から、プログラマブルインフラ構築(に行きたい)
泥臭い運用から、プログラマブルインフラ構築(に行きたい) 泥臭い運用から、プログラマブルインフラ構築(に行きたい)
泥臭い運用から、プログラマブルインフラ構築(に行きたい) Akihiro Kuwano
 
Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.nextyoshikawa_t
 
at+link サービスセミナー 20111209
at+link サービスセミナー 20111209at+link サービスセミナー 20111209
at+link サービスセミナー 20111209Hiroshi Bunya
 
Rails on GKEで運用するWebアプリケーションの紹介
Rails on GKEで運用するWebアプリケーションの紹介Rails on GKEで運用するWebアプリケーションの紹介
Rails on GKEで運用するWebアプリケーションの紹介Makoto Haruyama
 
KDL主催セミナー 20120215
KDL主催セミナー 20120215KDL主催セミナー 20120215
KDL主催セミナー 20120215Hiroshi Bunya
 
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~Yuki Ando
 
誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニングKiyokazu Kaba
 
Pull request時の画面差分取得の自動化
Pull request時の画面差分取得の自動化Pull request時の画面差分取得の自動化
Pull request時の画面差分取得の自動化Shunsuke Maeda
 
ストリーム処理プラットフォームにおけるKafka導入事例 #kafkajp
ストリーム処理プラットフォームにおけるKafka導入事例 #kafkajpストリーム処理プラットフォームにおけるKafka導入事例 #kafkajp
ストリーム処理プラットフォームにおけるKafka導入事例 #kafkajpYahoo!デベロッパーネットワーク
 
革新的ブラウザゲームを支えるプラットフォーム技術
革新的ブラウザゲームを支えるプラットフォーム技術革新的ブラウザゲームを支えるプラットフォーム技術
革新的ブラウザゲームを支えるプラットフォーム技術Toru Yamaguchi
 
AWS Black Belt Online Seminar AWS上でのスピードと高可用性を両立したゲームインフラの構築と事例
AWS Black Belt Online Seminar AWS上でのスピードと高可用性を両立したゲームインフラの構築と事例AWS Black Belt Online Seminar AWS上でのスピードと高可用性を両立したゲームインフラの構築と事例
AWS Black Belt Online Seminar AWS上でのスピードと高可用性を両立したゲームインフラの構築と事例Amazon Web Services Japan
 
20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
20120407 ASP.NET+C#で開発する大規模ソーシャルゲームhideyuki ikeda
 
シンラ・テクノロジー第2回クラウドゲーム開発者会議
シンラ・テクノロジー第2回クラウドゲーム開発者会議シンラ・テクノロジー第2回クラウドゲーム開発者会議
シンラ・テクノロジー第2回クラウドゲーム開発者会議Shinra_Technologies
 
Windows 8 Developers カンファレンス
Windows 8 Developers カンファレンスWindows 8 Developers カンファレンス
Windows 8 Developers カンファレンスKaoru NAKAMURA
 
Q con shanghai2013- 荣先乾-qzone_touch跨终端优化_v2.0
Q con shanghai2013- 荣先乾-qzone_touch跨终端优化_v2.0Q con shanghai2013- 荣先乾-qzone_touch跨终端优化_v2.0
Q con shanghai2013- 荣先乾-qzone_touch跨终端优化_v2.0Michael Zhang
 

Similaire à Effective web performance tuning for smartphone (20)

Voicepic@FukuiMASeminar
Voicepic@FukuiMASeminarVoicepic@FukuiMASeminar
Voicepic@FukuiMASeminar
 
決済金融から始めるデータドリブンカンパニー #yjmu
決済金融から始めるデータドリブンカンパニー #yjmu決済金融から始めるデータドリブンカンパニー #yjmu
決済金融から始めるデータドリブンカンパニー #yjmu
 
決済金融から始めるデータドリブンカンパニー
決済金融から始めるデータドリブンカンパニー決済金融から始めるデータドリブンカンパニー
決済金融から始めるデータドリブンカンパニー
 
泥臭い運用から、プログラマブルインフラ構築(に行きたい)
泥臭い運用から、プログラマブルインフラ構築(に行きたい) 泥臭い運用から、プログラマブルインフラ構築(に行きたい)
泥臭い運用から、プログラマブルインフラ構築(に行きたい)
 
Chrome DevTools.next
Chrome DevTools.nextChrome DevTools.next
Chrome DevTools.next
 
at+link サービスセミナー 20111209
at+link サービスセミナー 20111209at+link サービスセミナー 20111209
at+link サービスセミナー 20111209
 
Rails on GKEで運用するWebアプリケーションの紹介
Rails on GKEで運用するWebアプリケーションの紹介Rails on GKEで運用するWebアプリケーションの紹介
Rails on GKEで運用するWebアプリケーションの紹介
 
KDL主催セミナー 20120215
KDL主催セミナー 20120215KDL主催セミナー 20120215
KDL主催セミナー 20120215
 
Angularreflex20141210
Angularreflex20141210Angularreflex20141210
Angularreflex20141210
 
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
 
誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング
 
Pull request時の画面差分取得の自動化
Pull request時の画面差分取得の自動化Pull request時の画面差分取得の自動化
Pull request時の画面差分取得の自動化
 
ストリーム処理プラットフォームにおけるKafka導入事例 #kafkajp
ストリーム処理プラットフォームにおけるKafka導入事例 #kafkajpストリーム処理プラットフォームにおけるKafka導入事例 #kafkajp
ストリーム処理プラットフォームにおけるKafka導入事例 #kafkajp
 
革新的ブラウザゲームを支えるプラットフォーム技術
革新的ブラウザゲームを支えるプラットフォーム技術革新的ブラウザゲームを支えるプラットフォーム技術
革新的ブラウザゲームを支えるプラットフォーム技術
 
AWS Black Belt Online Seminar AWS上でのスピードと高可用性を両立したゲームインフラの構築と事例
AWS Black Belt Online Seminar AWS上でのスピードと高可用性を両立したゲームインフラの構築と事例AWS Black Belt Online Seminar AWS上でのスピードと高可用性を両立したゲームインフラの構築と事例
AWS Black Belt Online Seminar AWS上でのスピードと高可用性を両立したゲームインフラの構築と事例
 
20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
20120407 ASP.NET+C#で開発する大規模ソーシャルゲーム
 
シンラ・テクノロジー第2回クラウドゲーム開発者会議
シンラ・テクノロジー第2回クラウドゲーム開発者会議シンラ・テクノロジー第2回クラウドゲーム開発者会議
シンラ・テクノロジー第2回クラウドゲーム開発者会議
 
OSC 東京 2012春
OSC 東京 2012春OSC 東京 2012春
OSC 東京 2012春
 
Windows 8 Developers カンファレンス
Windows 8 Developers カンファレンスWindows 8 Developers カンファレンス
Windows 8 Developers カンファレンス
 
Q con shanghai2013- 荣先乾-qzone_touch跨终端优化_v2.0
Q con shanghai2013- 荣先乾-qzone_touch跨终端优化_v2.0Q con shanghai2013- 荣先乾-qzone_touch跨终端优化_v2.0
Q con shanghai2013- 荣先乾-qzone_touch跨终端优化_v2.0
 

Effective web performance tuning for smartphone

  • 1. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Effective 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/
  • 6. 6 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. SP Webのためのプロファイリングツール In smartphone browsers?
  • 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  Profile
 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)
  • 17. 17 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. SP Webのためのプロファイリングツール • System  InformaLon
 ハードウェア動作の統計情報   • CPU  Load   • Memory  usage   • Frame  Render  Time Android  Device  Monitor
  • 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
  • 21. SP Webパフォーマンスチューニングの基本原則 21 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Too  many  devices.   Too  many  OSs.   Too  many  browsers.
  • 22. 22 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. PC(Chrome) Smartphone アプリ全体の計測,  ベンチマーキング   チューニング 端末,  OSごとのエッジケースな問題   個別のシューティング SP Webパフォーマンスチューニングの基本原則
  • 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.
  • 32. 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()
  • 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  Profile   • Heap  Snapshot   • Heap  Allocaons   • Rendering  Opon   • Canvas  Frame   • Layers   ! などの各プロファイラでシューティングを Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
  • 38. FINAL FANTASY Record Keeper (FFRK) で学ぶ SP Web パフォーマンスチューニング 38 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
  • 39. 39 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 前回資料より
  • 40. 40 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング めっちゃ面白い   (実際は笑えません)
  • 41. 41 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 構成概要 内製フレームワーク  Kickmotor
  • 42. 42 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 構成概要 WebView Backbone  Model,  Scene(Controller) Backbone  View Underscore  Template CSS(SCSS) Rendered  HTML ←
  • 43. 43 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング チューニングほぼゼロ
  • 44. 44 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング ざっと見た結果(当時のメモ) JS  code   列を まったファイルの置換処理などはかなり負担ががが。 およそ かのスタイルプロパティにアクセスしている?。 ヒープの消費が激しく、およそ 度が上がりそう。 モデルやデータクラスなどの不要なインスタンスの解放がされているかどうかが怪し い。メモリリークは間違いなくしてそう。 Android る)  CPU レンダリング時間かかりすぎ。スプライト大きすぎる? transform ぬーーーー。 無理かも…
  • 45. 45 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング
  • 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  Bueerfly  (Android  4.2)   • Android  標準スペック端末   • Galaxy  S3α  (Android  4.1.1)   • Android  弱スペック端末   • HTC  Desire  (Android  2.3.6  Custom  ROM)   • Android  超弱スペック端末
  • 47. 47 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 注意 マジでジリ貧の戦いだった   ので、そこまでやるの?   みたいなこともやります
  • 48. 48 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 特定の周期で呼ばれ続ける recalculate  style  
  • 49. 49 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング この間60fps 特定の周期で呼ばれ続ける  recalculate  style  
  • 50. 50 Copyright (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が内部で暗黙的に実行してる場合も)
  • 51. 51 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 答え合わせ
  • 52. 52 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 特定の周期で呼ばれ続ける  recalculate  style(答)   • デシ君のローディングアニメがDOM  Treeに常に存在し た   • display:  none  として改善
  • 53. 53 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング スクロールした際の   挙動不安定、描画遅延
  • 54. 54 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング スクロールした際の挙動不安定、描画遅延 touchmoveごとに何らかの処理が行われている
  • 55. 55 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング スクロールした際の挙動不安定、描画遅延 1スクロールごとにGCが… タッチ-­‐>動かす-­‐>離すで一山
  • 56. 56 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング スクロールした際の挙動不安定、描画遅延 スクロール時80%~,  アイドル時20%~
  • 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~
  • 58. 58 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング スクロールした際の挙動不安定、描画遅延 コールスタックからどのメ ソッドがどのくらい呼ばれ ているのかを徹底的に洗い 出す
  • 59. 59 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 答え合わせ
  • 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
  • 62. 62 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング スクロールした際の挙動不安定、描画遅延(答) • 同一のQueryStringによるelement探索結果をキャッシュ   • jQuery  object  などをキャッシュすることで、余計なメソッドコールと DOM走査を削減   before aner
  • 63. 63 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング スクロールした際の挙動不安定、描画遅延(答) • 独自実装していた  closest()  メソッドでの親DOM要素の走査 ロジックを変更   • ターゲットの要素から.parentNodeをたどり次々に走査していたが、 Node.compareDocumentPosiLonを用いて親要素から子要素の位置を特 定する方式に切り替えた   before aner
  • 64. 64 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング スクロールした際の挙動不安定、描画遅延(答) • 各イベントハンドラで同一オブジェクト生成の削減   • コード内の多数の箇所にて同一の値に対してWebKitCSSMatrixオブ ジェクトを生成していたので、キャッシュを行った before aner
  • 65. 65 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング スクロールした際の挙動不安定、描画遅延(答) • イベントハンドラとしてjQuery.proxy(FuncLon.bind)で生成し た関数を登録していたが、無名関数からのcontext参照での 呼び出しに変更した before aner
  • 66. 66 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング スクロール時55%~,  アイドル時~10% スクロールした際の挙動不安定、描画遅延(答) ※特定の間隔で呼ばれ続けるRecalculate  Styleの改修含む
  • 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%程度の改善
  • 68. 68 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 意図しない合成レイヤー生成 とスタイル再描画
  • 69. 69 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 意図しない合成レイヤー生成とスタイル再描画
  • 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~で様々
  • 74. 74 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 意図しない合成レイヤーとスタイル再描画 合成レイヤーが発生し ている理由を徹底的に 洗い出す
  • 75. 75 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 意図しない合成レイヤーとスタイル再描画 合成レイヤーを表示して   どのレイヤーがぶつかってしまう のかを目視で調べる
  • 76. 76 Copyright (C) DeNA Co.,Ltd. All Rights Reserved.Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 答え合わせ
  • 77. 77 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 意図しない合成レイヤーとスタイル再描画(答) • DOMツリーを、レイヤーベースで再構築 よくあるDOM構築パターン 表示物を羅列して   z-­‐indexで整える レイヤーでの構築パターン 表示物ごとに親のレイヤーを決め   コンテンツごとに入れる場所を変える
  • 78. 78 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 意図しない合成レイヤーとスタイル再描画(答) • DOMツリーを、レイヤーベースで再構築 全画面のDIVを複数枚重ねて表 示位置ごとに要素をレイヤー内 へ配置する
  • 79. 79 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 意図しない合成レイヤーとスタイル再描画(答) • posiLon:fixedの指定された要素を減らす   • そもそも必要の無いposiLon:fixedが指定された要素が多数あったので 削除   ! • opacity指定による非表示要素もしくは画面外要素を display:none(or  visibility:hidden)とする   • opacityの指定による非表示だけではDOMのレンダリングツリーに 乗ってしまうので、明示的にDOMレンダリングツリーから削除した
  • 80. 80 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. FFRKで学ぶSP Webパフォーマンスチューニング 意図しない合成レイヤーとスタイル再描画(答) VRAMへのインパクトは少ないものの再描画頻度が激減
  • 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
  • 85. 85 Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ご静聴ありがとうございました