我试图让页面完全加载时间在几秒钟内与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一样，我正在尝试获得Page Full Load Time**。
我知道这种价值观不一致，但我想知道 我的计算是正确的，两个结果中哪个更正确？Fully Load Time (Page Evaluate)还是Fully Load Time (Page Metrics)？
1条答案
按热度按时间2guxujil1#
您可以使用
page.metrics()来比较两个时间点（例如page.goto之前和之后）。从performanceAPI读取数据的page.evaluate方法也是一个很好的替代方案。正如我已经在评论中指出的，它没有定义什么应该被认为是“全页加载”。这两种方法都是有效的。它甚至更复杂
人们可能会考虑加载一个页面，这其中有许多事情：
DOMContentLoaded事件Load事件您还必须考虑是否希望网络相关阶段（如DNS）成为测量的一部分。以下是一个示例请求（使用Chrome DevTools网络选项卡生成），显示了单个请求可能有多复杂：
还有一份文件解释了每个阶段。
简单的方法
测量加载时间最简单的方法是在导航开始时开始测量，在页面加载后停止测量。可以这样做：
请注意，还有其他API（
page.metrics、process.hrtime、perf_hooks）可以获得更精确的时间戳。您还可以将选项传递给
page.goto函数，将promise的解析更改为如下形式（引自文档）：当至少500 ms内没有超过0个网络连接时，认为导航完成
为此，您必须使用设置
networkidle0：上面链接的文档中还有其他事件可以使用。
更复杂：使用性能API
为了得到更精确的结果，你可以像在代码中那样使用Performance API，而不是使用
window.performance的原型，你也可以像这样使用performance.getEntries()或performance.toJSON()函数：这样，你得到的数据看起来像这样：
因此，如果你想知道从
navigationStart到loadEventStart需要多长时间，你可以用一个值减去另一个值（例如1556727039073-1556727036740=2333ms）。那么该选哪个呢？
这取决于您的决定。一般来说，使用
Load事件作为起点是一个好主意。等待所有请求完成实际上可能永远不会发生，因为在后台不断加载资源。如果您不想使用load事件，使用networkidle2作为waitUntil选项可能是一种替代方法。然而，最终还是取决于您的用例使用哪种度量标准。