如何使用 Puppeteer 计算页面完全加载时间？

2023-11-30

我试图使用 Node 中的 puppeteer 在几秒钟内获得页面完全加载时间，为此我对 API 和其他问题进行了一些研究，并创建了以下代码：

/* First Configuration */
    puppeteer.launch({
            defaultViewport: { width: 1600, height: 800 }
      }).then(async browser => {
        const page = await browser.newPage();
    await page.setCacheEnabled(false);
        await page.goto('https://stackoverflow.com', {waitUntil: 'networkidle0'});

        /* Get Page Metrics */

        const perf = await page.metrics();
        console.log(JSON.stringify(perf));

        /* Get Page Evaluate */

        const timing = await page.evaluate(() => {
            const result = {};
            for (const key of Object.keys(window.performance.timing.__proto__))
                result[key] = window.performance.timing[key];
            return result;
        });
        console.log(JSON.stringify(timing));

        /* Show Results on Browser Close */

        await browser.close().then(() => {

    var fullyLoadEvaluate = (timing.loadEventEnd - timing.navigationStart);
        console.log('Fully Load Time (Page Evaluate): ' + fullyLoadEvaluate);

        var fullyLoadMetrics = (perf.LayoutDuration + perf.RecalcStyleDuration + perf.ScriptDuration + perf.TaskDuration);
        console.log('Fully Load Time (Page Metrics): ' + fullyLoadMetrics);

        /* Send Response to Server */
        res.send('Check The Console');
        });

      });

基本上我使用两个代码来返回指标，其中之一是page.metrics()返回以下数据：

{"Timestamp":961736.600171,"Documents":8,"Frames":4,"JSEventListeners":375,"Nodes":8654,"LayoutCount":27,"RecalcStyleCount":31,"LayoutDuration":0.705517,"RecalcStyleDuration":0.144379,"ScriptDuration":0.527385,"TaskDuration":1.812213,"JSHeapUsedSize":11082496,"JSHeapTotalSize":20344832}

还有最后一张page.evaluate()，返回以下内容：

{"navigationStart":1556722407938,"unloadEventStart":0,"unloadEventEnd":0,"redirectStart":0,"redirectEnd":0,"fetchStart":1556722407938,"domainLookupStart":1556722408247,"domainLookupEnd":1556722408548,"connectStart":1556722408548,"connectEnd":1556722408737,"secureConnectionStart":1556722408574,"requestStart":1556722408738,"responseStart":1556722408940,"responseEnd":1556722409087,"domLoading":1556722408957,"domInteractive":1556722409995,"domContentLoadedEventStart":1556722409995,"domContentLoadedEventEnd":1556722410190,"domComplete":1556722412584,"loadEventStart":1556722412584,"loadEventEnd":1556722412589,"toJSON":{}}

在我的示例中，我正在测试该网站https://stackoverflow.com. Like 网页测试.org and getmetrix.com，我试图得到页面完全加载时间.

我知道这种值不一致，但我想知道我计算的值是否正确，两个结果似乎哪个更正确？Fully Load Time (Page Evaluate) or Fully Load Time (Page Metrics) ?

您可以使用page.metrics()比较两个时间点（例如之前和之后page.goto). The page.evaluate方法来读取数据performanceAPI也是一个不错的选择。正如我在评论中已经指出的那样，没有定义什么应该被视为“整页加载”。两种方法都是有效的。

甚至更复杂

人们可能会考虑加载页面的许多事情：

DOMContentLoaded事件被触发
Load事件被触发
从导航开始到文档中嵌入所有资源（例如加载图像）所需的时间
从导航开始到所有资源加载完毕所需的时间
直到没有更多正在进行的网络请求为止的时间。
...

您还必须考虑是否希望网络相关阶段（例如 DNS）成为测量的一部分。以下是一个示例请求（使用 Chrome DevTools Network 选项卡生成），显示单个请求可能有多复杂：

还有一个document解释每个阶段。

简单的方法

测量加载时间的最简单方法就是在导航开始时开始测量，并在页面加载后停止测量。这可以这样做：

const t1 = Date.now();
await page.goto('https://example.com');
const diff1 = Date.now() - t1;
console.log(`Time: ${diff1}ms`);

请注意，还有其他 API（page.metrics, process.hrtime, perf_hooks）以获得更精确的时间戳。

您还可以将选项传递给page.goto函数将承诺的解析更改为类似这样的内容（引自文档）：

当网络连接数不超过 0 且持续时间至少 500 毫秒时，认为导航完成

为此，您必须使用该设置networkidle0:

await page.goto('https://example.com', { waitUntil: 'networkidle0' });

您还可以使用上面链接的文档中的其他事件。

更复杂：使用性能 API

为了获得更精确的结果，您可以使用性能API正如您已经在代码中所做的那样。而不是通过原型window.performance您还可以使用以下功能performance.getEntries() or performance.toJSON()像这样：

const perfData = await page.evaluate(() =>
    JSON.stringify(performance.toJSON(), null, 2)
);

这样，您将获得如下所示的数据：

{
  "timeOrigin": 1556727036740.113,
  "timing": {
    "navigationStart": 1556727036740,
    "unloadEventStart": 0,
    "unloadEventEnd": 0,
    "redirectStart": 0,
    "redirectEnd": 0,
    "fetchStart": 1556727037227,
    "domainLookupStart": 1556727037230,
    "domainLookupEnd": 1556727037280,
    "connectStart": 1556727037280,
    "connectEnd": 1556727037348,
    "secureConnectionStart": 1556727037295,
    "requestStart": 1556727037349,
    "responseStart": 1556727037548,
    "responseEnd": 1556727037805,
    "domLoading": 1556727037566,
    "domInteractive": 1556727038555,
    "domContentLoadedEventStart": 1556727038555,
    "domContentLoadedEventEnd": 1556727038570,
    "domComplete": 1556727039073,
    "loadEventStart": 1556727039073,
    "loadEventEnd": 1556727039085
  },
  "navigation": {
    "type": 0,
    "redirectCount": 0
  }
}

所以如果你想知道从navigationStart to loadEventStart您从一个值中减去另一个值（例如1556727039073 - 1556727036740 = 2333 ms).

那么该选择哪一个呢？

这取决于您的决定。一般来说，使用Load事件作为起点。等待所有请求完成实际上可能永远不会发生，因为后台不断加载资源。使用networkidle2 as waitUntil option如果您不想使用加载事件，可能是一种替代方法。

然而，最终，这取决于您的用例使用哪个指标。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)