カクつくのを箇所を見つけるフレームビューアの使い方

https://www.chromium.org/developers/how-tos/trace-event-profiling-tool/using-frameviewer

wiltzius@

ウェブアプリがスムーズに動くためにはユーザの入力からJavaScriptのイベント処理が終わるまで、１６ｍｓ以内に収める必要がある。

実現には難しい場合があり、そのときにフレームごとに裏側で何が起こっているかを知る必要がある。FrameViewerでこれができるが、これはChromeのデバッグのためにつくられたもので、ウェブアプリのためのものではない。それでも開発者にとってはブラウザのフレームごとの処理を知るのは興味があることだろう。

前提条件：

• トレース実行の記録の準備をする。https://github.com/johnmccutchan/adb_traceから（またはにChromeのソースツリーのsrc/tools/perf/配下）のadb_profile_chrome.pyを使うのを推奨
• FrameViewer外観を読んで他のトレースとは違うフレームビューアトレースのレコードの仕方を知ること。＜途中＞

The short version is you need a number of non-default tracing categories enabled; the easiest way to do this is to use the adb_prorfile_chrome script (see above) and pass --trace-frame-viewer to it.