Angular 角事件持续时间

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

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

---

我应该如何做到这一点？我应该使用什么技术？谢谢。

一个非常简单的解决方案是使用会话存储。获取按钮单击事件执行的时间、api调用之前的时间、api调用中第一次“映射”或“订阅”的时间，然后使用函数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以获取其他值。

一个非常简单的解决方案是使用会话存储。获取按钮单击事件执行的时间、api调用之前的时间、api调用中第一次“映射”或“订阅”的时间，然后使用函数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以获取其他值。

您可以尝试API，如：

函数fire（）{
//初始化
var矩={}；
moments.evt1=performance.now（）；
moments.evt2=performance.now（）；
setTimeout（函数（）{
moments.evt3=performance.now（）；
//获得时间
var结果=[]；
结果.push（（moments.evt2-moments.evt1）+“ms”）；
结果.push（（moments.evt3-moments.evt1）+“ms”）；
//显示结果
document.getElementById（'result'）.innerHTML=results.join（'，'）；
}, 500);
}

点击我

您可以尝试API，如：

函数fire（）{
//初始化
var矩={}；
moments.evt1=performance.now（）；
moments.evt2=performance.now（）；
setTimeout（函数（）{
moments.evt3=performance.now（）；
//获得时间
var结果=[]；
结果.push（（moments.evt2-moments.evt1）+“ms”）；
结果.push（（moments.evt3-moments.evt1）+“ms”）；
//显示结果
document.getElementById（'result'）.innerHTML=results.join（'，'）；
}, 500);
}

点击我

这对我帮助很大。谢谢我唯一的问题是，如果我有1000个包含API返回的图像的条目，渲染需要更长的时间，但是ngAfterViewInit（）返回加载所有图像之前的时间。这对我帮助很大。谢谢我唯一的问题是，如果有1000个包含API返回的图像的条目，渲染需要更长的时间，但是ngAfterViewInit（）返回加载所有图像之前的时间。