Toggle navigation
JUPYTER
FAQ
View as Notebook
View as Code
Python 3 Kernel
View on GitHub
Execute on Binder
Download Notebook
slides
ChromeDevToolで計測する.ipynb
Notebook slides
ChromeDevToolで計測する
¶
2018/10/3 勉強会
アジェンダ
¶
大まかなレンダリングの流れ
RAILというパフォーマンスの指標
Chrome Developer Toolで計測
大まかなレンダリングの流れ
¶
ChromeのPerformanceのページの円グラフの項目の通り
この一連の処理を「クリティカルレンダリングパス」と呼ぶ
ざっくり概説
¶
Loading
¶
DNSの名前解決、TCPの接続確立、HTTPによる通信
プログラム、画像などのリソースの読み込み
DOM,CSSOMツリーの作成
Scripting
¶
JavaScriptの字句解析、構文解析
コンパイル
実行
Rendering
¶
Styleの計算
RenderTreeの作成
Painting
¶
レイヤーごとにピクセル描画
レイヤーの合成
パーフォマンスの指標
¶
RAIL
「ハイパフォーマンスブラウザネットワーキング」の著者のGoogleのおじさんが提唱
Response: 100ms
Animation: 16ms
Idle: 50ms
Load: 1,000ms
【参考】
RAIL モデルでパフォーマンスを計測する | Web | Google Developers
Chrome Developer Toolで計測する
¶
Network
Performance
Memory
Rendering
Audits
とりあえず、
cmd-alt-i
で開いてみましょう
Networkパネル
¶
リソース取得のタイムラインとリソースの詳細
Disable cache
にチェックでキャッシュなしでリロード
Offline
にチェックでネット切断
青い線はDOMContentLoadedイベントの発生点
これが遅いとスクリプトによる読み込みブロックが起きている
赤い線はLoadイベントの発生点
これが遅いとリソースが大きすぎる
詳細のTimingを見てみる
¶
適当にリソースを選択すると、右側で詳細が見れる
今回見るのは「Timing」の欄
Resource Scheduling
¶
HTTPよりも低レイヤであるTCP, TLSなどの接続確立の時間など
Request/Response
¶
Waiting(TTFB)
リクエスト送信後から、最初のデータを受信するまでの時間
これが長いと、サーバーでの処理に時間がかかっている
200ms以下が望ましい
実践
¶
imgにチェックしてみるとか
size
でソートしてみるとか
ログイン済みのときもアプリ詳細の画像を取ってきてる
Performanceパネル
¶
ページの読み込み、操作に関する全てのイベントを分析
左上の丸マークかリロードマークで計測
ボトルネックににっているものには右上赤三角が表示されている
【参考】
中部チャートの項目の概説
画面上部の緑のグラフはFPS
頂上が60FPS
その上部が赤くなっているところは、60FPSを切ったフレーム(フレーム落ち)
赤がなく、緑の面積が大きいほどいい
サイボウズのブログ 計測とその具体的な対処法が紹介されている
Bottole-Upなどに重い処理の呼び出し元の関数名も表示されている
webpackのせいかわかりにくい
GC
¶
cmd-f
などで「GC」と検索すればタイミングを見れる
アニメーション時などに起きると画面がもたつくので対策が必要
左上のゴミ箱マークをクリックするとGCを発動
実践
¶
右上赤三角を見てみよう
メモリのグラフを見てGCが起きている部分を見てみよう
「GC」と検索すればその前後に見つかるはず
重い処理
通知のページ
投稿のアイテム追加の検索のページ
my pageに来たとき
Memoryパネル
¶
メモリの利用状況
メモリリークの検知やメモリの使いすぎを把握
「Record Allocation Timeline」でメモリリークが起きている箇所を見つける
Record Allocation Timeline
¶
50ms毎にヒープのスナップショットを取得し、記録終了時に最後のスナップショットを取得
見方
縦線の高さ: オブジェクトのサイズ
青: タイムラインの終了時まで存在しているオブジェクト
灰: タイムライン中にGCが行われたオブジェクト
@の数字はオブジェクトID
GCが行われなかったということは、どこかで参照されているから
Rendering
¶
右上の点が縦に3つ並ぶメニューから「Rendering」を選択
「Paint flashing」にチェックを付けると、再レンダリングされたところが緑になる
【参考】
Chrome DevTools の「Enable paint flashing」を使う - kitak's blog
実践
¶
「Paint flashing」にチェックを付けよう
スクロールやページ遷移をして無駄な再描画がないか確認しよう
Auditsパネル
¶
パフォーマンス診断ツール
PageSpeed Insightsみたいなやつ
カテゴリー別の課題とその深刻度を表示
クリックするとその解決法を教えてくれる
所感
¶
これまで気にしてなかったが調べてみたら関連記事が山ほど出てきた
問題は見つけられても解決できなければ意味がない
Reactの場合
Reactの内部構造を知る必要がある
差分描画の仕組みとか
やるしかない
ReactはReactで便利な解析ツールがありそう
react-perf-devtoolとか
参考
¶
dev tool 公式
https://webtan.impress.co.jp/e/2017/02/20/24816
https://qiita.com/y_fujieda/items/a0a69151cf7307039f74
https://www.slideshare.net/yoshikawa_t/chrome-developer-tools-17787728
関連(もっかい読む)
¶
dev toolを使ったReactのチューニング AbemaTV