page.vs.Puppeteer $方法 [英] page.evaluate Vs. Puppeteer $ methods

问题描述

我对这两个代码块的差异很感兴趣.

I'm interested in the differences of these two blocks of code.

const $anchor = await page.$('a.buy-now');
const link = await $anchor.getProperty('href');
await $anchor.click();

await page.evaluate(() => {
    const $anchor = document.querySelector('a.buy-now');
    const text = $anchor.href;
    $anchor.click();
});

我通常发现 page.evaluate()中的原始DOM元素更容易使用，而$方法返回的ElementHandles到目前为止是一个抽象.

I've generally found raw DOM elements in page.evaluate() easier to work and the ElementHandles returned by the $ methods an abstraction to far.

但是我也许觉得异步Puppeteer方法可能会更有效或提高可靠性?我在文档中找不到关于此的任何指导，并且有兴趣了解有关每种方法的专业人士/专业人士以及添加诸如 page.$$()之类的方法背后的动机的信息.

However I felt perhaps that the async Puppeteer methods might be more performant or improve reliability? I couldn't find any guidance on this in the docs and would be interested in learning more about the pro's/con's about each approach and the motivation behind adding methods like page.$$().

推荐答案

这些代码行之间的主要区别是Node.js与浏览器环境之间的交互.

The main difference between those lines of code is the interaction between the Node.js and the browser environment.

第一个代码段将执行以下操作:

The first code snippet will do the following:

• 在浏览器中运行 document.querySelector 并返回元素句柄(到Node.js环境)
• 在该句柄上运行 getProperty 并将结果返回(返回到Node.js环境)
• 在浏览器中单击一个元素

• Run document.querySelector in the browser and return the element handle (to the Node.js environment)
• Run getProperty on the handle and return the result (to the Node.js environment)
• Click an element inside the browser

第二个代码段只是这样做:

The second code snippet simply does this:

• 在浏览器上下文中运行给定函数(并将结果返回到Node.js环境)

关于这些语句的性能，必须记住木偶戏通过WebSockets与浏览器进行通信.因此，由于只有一个命令发送到浏览器(而不是三个)，所以第二条语句将运行得更快.

Regarding the performance of these statements, one has to remember that puppeteer communicates via WebSockets with the browser. Therefore the second statement will run faster as there is just one command send to the browser (in contrast to three).

如果您要连接的浏览器在另一台计算机上运行(使用

This might make a big difference if the browser you are connecting to is running on a different machine (connected to using puppeteer.connect). It will likely only result in a few milliseconds difference if the script and the browser are located on the same machine. In the latter case it might therefore not make a big difference.

使用元素句柄具有一些优点.首先，使用 elementHandle.click <与使用 document.querySelector('...').click()相比，/a>的行为更具人性化".例如，puppeteer会将鼠标移动到该位置并单击元素的中心，而不仅仅是执行 click 函数.

Using element handles has some advantages. First, functions like elementHandle.click will behave more "human-like" in contrast to using document.querySelector('...').click(). puppeteer will for example move the mouse to the location and click in the center of the element instead of just executing the click function.

通常，我建议尽可能使用 page.evaluate ，因为此API调试起来也容易得多.发生错误时，您只需在Chrome浏览器中打开DevTools，然后在浏览器中重新运行相同的行即可重现该错误.如果将很多 page.$ 语句混合在一起，则可能很难理解问题所在以及它是否在Node.js或浏览器运行时中发生.

In general, I recommend to use page.evaluate whenever possible as this API is also a lot easier to debug. When an error happens, you can simply reproduce the error by opening the DevTools in your Chrome browser and rerunning the same lines in your browser. If you are mixing a lot of page.$ statements together it might be much harder to understand what the problem is and whether it happened inside the Node.js or the browser runtime.

如果需要更长的时间，请使用元素句柄(因为您可能已经进行了一些复杂的计算，或者等待外部事件之后才能从中提取信息).

Use the element handles if you need the element for longer (because you maybe have make some complex calculations or wait for an external event before you can extract information from them).

这篇关于page.vs.Puppeteer $方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！