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

Question

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

我有兴趣按照W3工作组W3 performance working group的建议，用不同的页面加载时间性能指标(浏览器计时和DOM处理)来注释我的应用程序。

如何开始在我的TypeScript应用程序中导入性能对象，以便可以开始监视前面提到的here中的不同性能指标。

谢谢，Pradip

Answer 1

性能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的。