返回

performance.timerify 无法使用PerformanceObserver监听 domComplete

后端

探索performance.timerify的bugs

性能API为开发者提供了许多获取、分析以及测量应用程序与页面性能的方法，比如我们想要统计domComplete的耗时，可以通过如下代码：

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'domComplete') {
      // do something
      console.log(entry)
    }
  }
});

observer.observe({ entryTypes: ['domComplete'] });

但是在Node.js中实现的性能API里，使用上面的代码时，domComplete事件的回调却无法触发。

通过查阅nodejs的issue，发现了一个issue，详细了这个bugs：Issue #39797 · nodejs/node

issue里有一个网友给出了解决办法：除了需要模拟domComplete事件之外，还需要模拟domContentEventFired事件，然后再触发domComplete事件，才可以触发PerformanceObserver的回调。

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'domComplete') {
      // do something
      console.log(entry)
    }
  }
});

observer.observe({ entryTypes: ['domComplete'] });

performance.timerify('domContentEventFired')
setTimeout(() => {
  performance.timerify('domComplete')
}, 1000);

上面这个办法确实是可以触发PerformanceObserver的回调，但是当我们在浏览器中观察performance.timing的时候，会发现domComplete事件的startTime和domContentEventFired事件的startTime是一样的，显然这并不合理，应该是domComplete事件的startTime应该大于domContentEventFired事件的startTime才对。

所以对于这个问题，暂时还是没有一个比较好的解决办法，需要等待Node.js官方修复这个问题。