Chrome DevToolsは対話の反応をどのように測定しますか？

Question

私はChromeでインタラクションのユーザーが知覚する待ち時間を測定しようとしています。これは、キーを押してから画面を更新するまでの時間です。この例では、新しいコンテンツで画面の大部分を再描画しています。ネットワークレイテンシは関係ありません。ちょうどHTMLを更新しています。

以下のスクリーンショットでは、Chrome DevToolsのkeydownイベントが表示され、javascriptが大量に実行されています。その後、ペイントや合成などが行われ、keydownイベントの「レスポンス」スパンが終了します。

ChromeがGPUに新しいレンダリングを書き込んだので、水平の灰色の線がvsyncであるとします（これらの行がどこに文書化されているか分かりますか？）。 keydownイベントは、私が測定しようとしているものによく近似しています。これは、keydownからDOMを突然変異させた後の最初のグレーラインの直後までの時間を測定するためです。

私はこの時間をjavascriptで近似するために、requestAnimationFrame、requestIdleCallback、メッセージの受け渡しを伴う一式polyfill、および上記のいくつかの組み合わせを使用しています。それらのすべてが純粋なJavascript時間よりも長いように思われますが、ほとんどの場合、実際に画面を更新する時間を過小評価したり過大評価したりします。

誰もこの生産時間を測定するより良い方法を知っていますか？ Chrome DevToolsの指標はどのように機能しますか？私は何か他のものを完全に測定すべきですか？

Answer 1

これらの入力レイテンシのイベントのための機器はかなり洗練されたクールです。これらはすばらしい質問です。

入力遅延イベントは、それらがトリガ作業は画面の更新が必要無効化を引き起こしたと仮定すると、

入力遅延イベントがVSYNC周り終了時刻を終了します。これは、あなたのスクリーンショットでKey DownがKey Upよりもはるかに広がっている理由です。

& VSYNCこれらのイベントが終了するのは間違いなく可能ですが、これは本当に画面が応答して更新されるときではありません。入力...あなたはあなた自身でその呼び出しを行う必要があります。

グレーライン、VSYNC、スワップ・バッファ

を点在グレーの点線は、フレームの境界であるが、それはここではトリッキーな取得を開始します。 Chrome（およびAFAIK、他のブラウザも）には、メインスレッドフレームとコンポジタスレッドフレームがあります。 DevToolsは、単一のタイムラインのフレームを表示して、単純なものにするため、完全ではありません。あなたの目的のために、私はそのFramesトラックのスクリーンショットの右端を見るでしょう。右端は、その内容で画面が更新される場所です。 Chromeではこの時間をswapBuffersと呼びます。あなたは引くのに最適なツールを持っていない、

残念ながらこれをJavaScriptで測定

（モニターがわずかに異なっている、「私は新しいフレームのための準備ができています」と言うときVSYNCは技術的です）これはオフです。古い技法は二重rAFであり、しばしば時間を減じる。この時点で、あなたは1つの新しいフレームがあることを間違いなく知っています。this knowledgeの一部を適用すると、おそらくかなりスマートになる可能性があります。しかし完璧にはならない。例えば、長い画像デコードでは、コンポーザーがフレームを出荷するのが遅れますが、メインスレッドはアイドル状態になり、VSYNCによって新しいフレームが開始されます（rAFが再び呼び出されます）。

ロングタスクAPIは、メインスレッドでどのような作業をしているのかを説明するのに役立ちます。しかし、私はこれらの質問に答えるために必要な精度を持っているとは思わない。 Frame Timingは持っていましたが、プライバシーの理由から死んでしまいました。

TDLR：

入力がコンポジで受信されたときにそれがかかったとして、timestamp from the input eventを使用してください。そして、フレームが出荷されたときに近似するために、いくつかの時間を差し引いて、いくつかの単一rAF、ダブルrAFメカニズムを使用します。あなたが幸せなことをあなたが持っているとき、そして君たちは幸せです。興味ある。