Question

我需要创建一个Angular Web应用程序，我需要记录一些与性能时间相关的数据：

按钮点击和API调用之间的时间被触发
触发API调用之间的时间，API返回响应
API返回响应和数据呈现之间的时间

我应该如何实现这一目标？我应该使用哪些技术？感谢。

Answer 1

一个非常简单的解决方案是使用会话存储。获取按钮单击事件执行的时间，api调用之前的时间，来自api调用的第一个“map”或“subscribe”中的时间，然后使用函数ngAfterViewInit（）来知道它已重新呈现。

首先是按钮点击...

buttonClicked() {
   const nowMilliseconds = Date.now();
   window.sessionStorage.setItem('button', nowMilliseconds);
   this.myService.callApi()
      .subscribe(response => {
           const responseMilliseconds = Date.now();
           window.sessionStorage.setItem('response', responseMilliseconds);
           // make sure to set some value here that will make the screen have to re-render
       });
}

ngAfterViewInit() {
   const renderedNow = Date.now();
   window.sessionStorage.setItem('rendered', renderedNow);
}

并在您的服务中......

callApi() {
   const callingApi = Date.now();
   window.sessionStorage.setItem('apicall', callingApi);

   return this.httpService.get('myApiEndpoint');
}

然后在完成所有操作后获取值，您可以查看开发人员工具并查看毫秒数并计算差异，或者您可以使用window.sessionStorage.getItem（'apicall'）在角度代码中获取它们; ...将apicall替换为其他字符串以获取其他值。

Answer 2

您可以尝试performance.now() API，例如：

＆＃13;

function fire() {
  // Init
  var moments = {};
  moments.evt1 = performance.now();
  moments.evt2 = performance.now();
  setTimeout(function() {
    moments.evt3 = performance.now();
    // Get times
    var results = [];
    results.push((moments.evt2 - moments.evt1) + 'ms');
    results.push((moments.evt3 - moments.evt1) + 'ms');
    // Show results
    document.getElementById('result').innerHTML = results.join(', ');
  }, 500);
  
}

＆＃13;

<html>
  <body>
    <button type="button" onclick="fire()">Click me</button>
    <div id="result"></div>
  </body>
</html>

＆＃13;

角度事件持续时间

2 个答案: