使用 JavaScript 以编程方式捕获 chrome 性能报告？

Question

我们一直在运行 CPU 密集型 Web 应用程序，并且由于每个用户的硬件和 CPU 可用性不同，因此在调试性能问题时存在一些挑战。

尽管如此，我们尝试在远程调试中检查性能配置文件和监控。我们希望在应用程序运行时使用 JavaScript 以编程方式捕获这些信息并记录信息以更有效地分析问题。

有人知道 npm 包吗，它可以帮助我们捕获以下信息：

• chrome 中的 GPU 信息（是否启用硬件加速）。
• 特定选项卡上的 CPU 消耗。
• JS 堆大小。
• 长时间运行的任务。
• ...

附注我已经完成了这个 npm 包https://www.npmjs.com/package/lighthouse。但它似乎不支持 ES 模块格式，也没有提供我在性能指标中需要的一些信息。

感谢这里的一些帮助。

Answer 1

对于 GPU，不幸的是我没有看到任何可以使用的全局 api 这样做，但是您可以检查 WebGL 可用性，这需要硬件 加速

const isHAEnabled = () => {
    const cn = document.createElement('canvas'); /*or any canva u have*/
    const gl = cn.getContext('webgl') || canvas.cn('experimental-webgl');
    return gl && gl instanceof WebGLRenderingContext;
};

CPU 使用情况：

const start = performance.now();
for (let i = 0; i < 1000000000; i++) {
    // Do some computation
}
const end = performance.now();
const usage = end - start; 

usage

包含CPU的使用情况（以毫秒为单位），我使用了很长的循环来模拟这项艰巨的任务

内存（已用堆大小）： 简单:)

const heapSize = performance.memory.usedJSHeapSize

长时间运行的任务：

performance.mark("start");
// your long running task eg the loop earlier
performance.mark("end");


performance.measure("codeExecutionTime", "start", "end");
const duration = performance.getEntriesByName("codeExecutionTime")[0].duration;

但是对于最后一个，您需要更改每个小节的标记 id， 我不知道为什么浏览器保留旧标记而不是新标记

我希望这有帮助