Chrome Puppeteer：通过JSHandles或通过page.execute（）做一切是否更好？

Question

我正在编写一个相当复杂的脚本，使用Puppeteer完成一些相当复杂的工作。但是，它可能都是在Puppeteer中使用ElementHandles完成的。所以，我想知道什么是更好的选择：

1. 只需将大量代码推送到page.evaluate（）并将其称为一天
2. 使用ElementHandles
等功能通过page.$()访问所有内容

我认为传递这些元素句柄可能会非常昂贵......

Answer 1

考虑一种情况，您希望使用Puppeteer访问网页上元素的textContent。

直接处理page.evaluate()内的元素要比将元素作为ElementHandle传递给函数要快 2倍。

此外，将pageFunction 作为字符串传递给page.evaluate()而不是作为函数，甚至更快。

您可以通过在page.evaluate()内使用getElementById()而不是querySelector()来进行其他微优化。

最慢的方法是将elementHandle.getProperty()与elementHandle.jsonValue()结合使用。使用此方法将需要您等待超过4倍的时间（与本实验中最快的方法相比）。

您可以在下面查看执行的测试和结果：

await page.evaluate( 'document.getElementById( "result" ).textContent' );               // ≈ 0.41 ms ✔
await page.evaluate( 'document.querySelector( "#result" ).textContent' );               // ≈ 0.42 ms
await page.evaluate( () => document.getElementById( 'result' ).textContent );           // ≈ 0.42 ms
await page.evaluate( () => document.querySelector( '#result' ).textContent );           // ≈ 0.44 ms
await page.evaluate( result => result.textContent, await page.$( '#result' ) );         // ≈ 0.99 ms
await ( await ( await page.$( '#result' ) ).getProperty( 'textContent' ) ).jsonValue(); // ≈ 1.69 ms ✘

以上所有测试均进行了 1,000,000次，并且在上面的注释中显示了单次迭代的平均时间。

因此，为了回答您的问题，似乎最便宜的方法是尽可能在page.evaluate()中处理您的代码。