Question

我正在尝试在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 网站。与webpagetest.org和getmetrix.com一样，我正在尝试获取页面完全加载时间。

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

Answer 1

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

它甚至更复杂

人们可能会考虑许多要加载页面的内容：

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

您还必须考虑是否要将与网络相关的阶段（例如DNS）纳入测量范围。这是一个示例请求（通过Chrome DevTools的“网络”标签生成），显示了单个请求的复杂程度：

还有一个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函数，以将诺言的解决方式更改为以下内容（引自文档）：

在至少500ms内不超过0个网络连接时，请考虑完成导航

为此，您必须使用设置networkidle0：

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

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

更复杂：使用Performance API

要获得更精确的结果，可以像在代码中一样使用Performance API。除了查看window.performance的原型，您还可以使用函数performance.getEntries()或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到loadEventStart花费了多长时间，则可以从另一个值中减去一个值（例如1556727039073-1556727036740 = {{1 }} ms）。

那要拿哪一个呢？

这取决于您的决定。通常，最好将2333事件用作起点。实际上，等待直到所有请求都完成是不可能的，因为在后台不断加载资源。如果您不想使用load事件，可以将Load用作networkidle2 option。

最后，取决于您的用例，使用哪种度量标准。

如何使用Pupppeteer计算页面满负荷？

1 个答案:

它甚至更复杂

简单方法

更复杂：使用Performance API

那要拿哪一个呢？