問題タブ [navigation-timing-api]

ログイン画面にアニメーションがあり、サインインボタンがクリックされたときにボタンを下にスライドし、同時に電子メールとパスワードの入力ボックスを上にスライドします.2000ミリ秒の期間がありますが、代わりに位置が即座に変わりますスムーズにスライドします。

アニメーションは機能コンポーネントにあるため、クリックして元に戻す前にアニメーションが元に戻らないようにするために、位置を保持するために useState() を使用しています (以前は useState() を使用する前に、テキストを変更したときに入力ボックス、アニメーションは元の位置にリセットされます)

アニメーションはこちら

アニメーションを呼び出す 2 つのボタン onPress() があり、位置を変更する 2 つのビューがあります。

ありがとう

W3C標準で示されているように、Webナビゲーションとリソースタイミングに関する統計を提供する生産監視システムがあります。統計のサンプル リファレンスを以下に示します。

https://developer.mozilla.org/en-US/docs/Web/Performance/Navigation_and_resource_timings

私たちの Web サイトの本番環境の監視中に、ドキュメントのアンロード (unloadEventEnd) 統計が、最初のバイトまでの時間 (responseStart) に近い高い側にあることがわかりました。だから、私は知っておくべき明確化にたどり着きました：

考えられる理由によりドキュメントのアンロードに時間がかかるかどうか-現在の API/Ajax または Https リクエストが遅延し、応答の最初のバイトを返すのにかかった合計時間を合計すると、[最初のバイトまでの時間] の値が高くなります ( responseStart) メトリック?

ページの読み込みにかかる時間を取得しようとしていますが、このスクリプトを実行する正しい方法がわかりません。

私はこれができると思った：

ただし、常に 0 を返します。

後でコンソールで実行すると、正常に動作します。ウィンドウの読み込みイベントの後に実行される別のイベントはありますか? この関数の正しい使い方は何ですか?

編集: setTimeout を使用すると、ページが完全に読み込まれた後に実行される最初のものとして追加されるようです。作業コードは次のとおりです。