Angular 7 如何计算组件在 DOM 上完全加载所需的时间

Question

我正在尝试获取组件完全加载到 dom 所需的时间，使用来自 this answer on stack 的 ngOninit() 中的以下内容：

ngOnInit()
{
    var time = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart
    console.log(time)
}

结果是这样的：

-1544706869570

我用了ngAfterViewInit():

ngAfterViewInit(){
    var time = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart
    console.log(time)
  }

结果是一样的。

如何将它转换成秒，有没有更好的解决方案来检查 angular 7 中的组件负载？

Answer 1

您可以用 window.performance.now 以毫秒为单位进行测量，如下所示：

startTime! : number
initTime! : number
contentInitTime! : number
viewInitTime! : number

printTime(time : number) {
  console.log(`Global loading ${ time }ms`)
  console.log(`Global loading ${ time / 1000 }s`)
  console.log(`Component loading ${ time - this.startTime }ms`)
  console.log(`Component loading ${ (time - this.startTime) / 1000 }s`)
}
// Created
constructor() {
  this.startTime = window.performance.now()
  this.printTime(this.startTime)
}
// Initialized by angular
ngOnInit() {
  this.initTime = window.performance.now()
  this.printTime(this.initTime)
}
// Rendered without children
ngAfterContentInit() {
  this.contentInitTime = window.performance.now()
  this.printTime(this.contentInitTime)
}
// Rendered with children
ngAfterViewInit() {
  this.viewInitTime = window.performance.now()
  this.printTime(this.viewInitTime)
}

Angular 7 如何计算组件在 DOM 上完全加载所需的时间

Angular 7 how to calculate the time a component take to completely load on the DOM

performance

angular

angular7