New burstMode for screenshots

Page. _screenshotTask can make up to 4 WebSocket calls before performing the screenshot:

• Target.activateTarget
• Page.getLayoutMetrics
• Emulation.setDeviceMetricsOverride
• Emulation.setDefaultBackgroundColorOverride

Then it calls Page.captureScreenshot and then it might need to call Emulation.setDefaultBackgroundColorOverride and setViewport .

This hurt the performance when trying to perform screenshots in “burst mode”. With “burst mode” I mean taking a series of screenshots to the same page during a certain period.

With this new BurstMode we would perform those first four calls only on the first screenshot. Then we would call only Page.captureScreenshot.

After screenshots are taken, the user will need to call setBurstModeOff explicitelly. So we run Emulation.setDefaultBackgroundColorOverride and setViewport.

This is how the code would look like:

await page.setViewport({width: 500, height: 500});
await page.goto(server.PREFIX + '/grid.html');
for (let i = 0; i < 30; ++i) {
  promises.push(page.screenshot({
    clip: {
      x: 50 * i,
      y: 0,
      width: 50,
      height: 50
    },
    burstMode = true
  }));
}
await page.setBurstModeOff();

I implemented this on Puppeteer-Sharp, and it performed 2.5x times faster. This was used by a user who wanted to create GIFs from her page. Let me know what you think about it. I’m willing to implement this here.

[aslushnikov]

Hey @kblok, thanks for filing this.

Our screenshots are not very performant indeed. I have a few thoughts regarding this:

1. The burstMode the way it is implemented here could be done from the user-land. The main performance hit comes from the emulation we do for every screenshot. If instead the viewport is set initially, and the subsequent screenshots are generated without the fullPage argument, then they should be much faster.

// Crude estimation for page width / height
const {width, height} = await page.evaluate(() => ({width: document.body.offsetWidth, height: document.body.offsetHeight});
await page.setViewport({width, height});
await Promise.all(new Array(30).map((_, i) => page.screenshot({
  clip: {
    x: 50 * i,
    y: 0,
    width: 50,
    height: 50
  }
})));

1. IIRC the protocol implementation of Page.captureScreenshot has a lot of low-hanging fruits to pick that will bump performance; I’d be glad to see this happenning.
2. Ultimately, the #478 would be a much nicer solution for the GIF-generation usecase and many others.

To summarize, my concerns regarding burst mode are:

• We have a lot of room for improvement to make screenshots faster on the chromium side, drastically reducing value of “burst mode” API.
• There are plans for screen capture API that will supersede the “burst mode” API.

Let me know what you think

P.S. awesome work on pptr#! 👍

[kblok]

The screen capture feature would kill this feature for sure. I don’t know how many users are trying to do “burst mode” to make an important internal change.

The burstMode the way it is implemented here could be done from the user-land.

The main cost here are the WebSocket calls. If the user does that manually, we will go from 7 calls to 4 (because only three calls are under the fullScreen option) and I think those are too many calls if you want to take 3+ screenshots per second.

I just wanted to share my two cents here. Feel free to close this issue if you think it doesn’t worth the effort to implement it.

P.S. awesome work on pptr#! 👍

💪