javascript - SPA 内のページの読み込み時間を表示する

Question

AngularJS に、さまざまなテンプレートを単一の SPA にロードする SPA があります。

このhttps://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp?hl=enを読んだ後、SPA の本文に onload="measureCRP()" を含めました。基本的にはこのようなものです

<body onload="measureCRP()">
  <div ng-app="app">
    <div ng-view></div>
  </div>
</body>

また、ページが読み込まれるたびに、DOM の構築に費やされた時間と、ページの全体的な読み込み時間が表示されます。

もちろん、ビューが更新されても、これは更新されません。すべてのテンプレートに同様のものを含めることを考えましたが、うまくいかないようです。

これをどのように行うべきかについてのアイデアはありますか？

編集。

この他の投稿Angular js ng-view render eventで提案されているように、オンロードを含めてみました

<body>
  <div ng-app="app" ng-controller="SpaController as spa">
    <div ng-view onload="spa.measureCRP()"></div>
  </div>
</body>

しかし、関数 measureCRP() が再度実行されますが、表示される値は毎回まったく同じであるため、収集されたタイムスタンプは同じままであると推測されます。ありがとう

score 0 · Accepted Answer

これはSPAの問題です。「実際の」ナビゲーションは 1 回だけ行われ、他のすべてのナビゲーションは AJAX を介してフレームワークによって行われます。これは、DOM が完了したときに onLoad が起動することを意味しますが、何かが表示されたことを意味するものではありません。

このリンクが役立つと思います

さよなら

1 に答える 1