問題タブ [navigation-timing-api]

たとえば、ナビゲーションタイミングAPIを使用してDOMの準備時間を測定する方法を説明するGoogle開発者のサンプルを見つけました。問題は、結果の値が chrome 開発者ツールに表示される値と大きく異なることです。エラーは何でしょうか？

したがって、ここでは、DCL イベントに約 590 ミリ秒かかり、ページの完了に約 594 ミリ秒かかることがわかります(申し訳ありませんが、画像を投稿するのに十分な評判がありません。開発者ツールを開いていただけますか)。しかし...ナビゲーションタイミングAPIからキャプチャされた値はまったく異なります（ここにGoogleの記事へのリンクがあります）。

それが彼らがこの値を取得する方法です：

Facebookやyoutubeなどの外部サイトのパフォーマンスページロードを測定したい..それを実現するツールとしてナビゲーションのタイミングを見つけました。しかし、それが私のウェブサイトでのみ行われているという問題。そうでない場合、Facebook ページを開いたときにナビゲーション タイミング API を実行できますか?

各 API 呼び出しを測定し、それぞれの期間を Google アナリティクスに送信できる AngularJS (1.5.x) のインターセプターを実装しようとしています。

私はこれのダミーの実装から始めましたnew Date().getTime()。

一見すると良さそうに見えますが、Chrome の Networks タブで収集されたリクエストの期間を比較すると、私のコードで収集されたリクエストは、Chrome で収集されたリクエストよりも常に長い (場合によっては長い!) ことに気付きました。

私の頭に浮かんだもう 1 つのアイデアは、User Navigation APIの使用です。そのため、コードを次のように変更しました。

..しかし、 Chromeによって収集されたものとは異なる結果を受け取りました。new Date().getTime()

私は何を間違っていますか？どうすればいいですか？多分リソースタイミングAPI？AngularJS は確かに少し課せられます。

特定のリクエストを認識できないため、 User Navigation API メソッドを使用window.performacne.getEntries()してリクエストの期間を見つけることができません。各リクエストのパラメーターはそこでは利用できず、パラメーターが異なるだけの同じ API 呼び出しがたくさんあります。

AngularJS で使用されるネイティブ XHR リクエストをデコレートする必要がありますか?

loadEventEndたとえば、コンソールで時間を取得しようとしています。パフォーマンス タイミング 2 APIまたはパフォーマンス タイミング APIで実行できます。この計算を行うと、同じ結果が得られます。

しかし、devtools の [タイムライン] タブでは、結果が510 msになります。相違点を次の図に示します。

この問題は他のサイトでも発生します。コンソールでは、[タイムライン] タブよりも常に短い時間が表示されます。誰かがこの違いを説明できますか? どれが本当ですか？

Chrome の Lighthouse ツールと WebPageTest は、「対話までの時間」(TTI) 指標を提供します。

Google では、TTI の最小限の定義を提供しています。

インタラクティブになるまでの時間は、レイアウトが安定し、主要な Web フォントが表示され、ユーザー入力を処理するのに十分なメイン スレッドが使用可能になった時点として定義されます。

このメトリックは初期段階にあり、変更される可能性があることに注意してください。

WebPageTestは、それらを「最初のインタラクティブになるまでの時間」と「一貫してインタラクティブになるまでの時間」に分けます。

一貫した対話型計算の時間

• 最初のコンテンツ ペイントまたは DOM コンテンツ ロードの大きい方で TTI を探し始めます。
• 進行中のリクエストが 2 つ以下で、インタラクティブ ウィンドウ内に完全に含まれる 5 秒間の連続した期間がある最初のインタラクティブ ウィンドウを探します。
• TTI は、手順 2 からの対話型ウィンドウの開始点または検索開始点のいずれか遅い方です。

最初のインタラクティブ計算

• 最初のコンテンツ ペイントまたは DOM コンテンツ ロードの大きい方で TTI を探し始めます。
• 処理中のリクエストの数に関係なく、インタラクティブ ウィンドウ内に完全に含まれる 5 秒間の連続した期間がある最初のインタラクティブ ウィンドウを探します。
• TTI は、手順 2 からの対話型ウィンドウの開始点または検索開始点のいずれか遅い方です。

WebPageTest の 2 つの異なる TTI メトリックをクライアント側で計算し、API に送り返したいと思います ( RUMの目的で)。

現在の JavaScript API でそのような計算は可能ですか? もしそうなら、どのように？

アップデート：

満足のいくクライアント側の解決策は見つかりませんでしたが、TTI のより詳細な定義を見つけました。