在TypeScript前端程序中测量Web性能指标

问题描述

我的前端是用Angular9 TypeScript编写的。

我有兴趣为W3工作组W3 performance working group建议的应用程序使用不同的页面加载时间性能指标（浏览器计时和DOM处理）进行注释。

如何开始在TypeScript应用程序中导入Performance对象，以便可以开始监视here所述的不同性能指标。

谢谢， Pradip

解决方法

性能API由浏览器提供，因此，如果您希望直接使用它们，则无需导入任何内容。我已将示例复制到MDN：

function print_nav_timing_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i=0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.domInteractive);
 
    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));
    
    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}

但是，如果您只想测量这些特定指标，则可以使用他们提供的here的web-vitals项目。用法如下：

import {getFCP} from 'web-vitals';

// Measure and log the current FCP value,// any time it's ready to be reported.
getFCP(console.log);

由于源可用，因此您也可以查看它们如何使用API。

performance-testing typescript typescript w3c