webcontents performance & throttling

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Offscreen rendering overview and purpose

Offscreen rendering lets you obtain the content of a BrowserWindow in a bitmap or a shared GPU texture, so it can be rendered anywhere, for example, on texture in a 3D scene. Electron uses a similar approach to the Chromium Embedded Framework project.

Offscreen rendering efficiency with paint event

Only the dirty area is passed to the paint event to be more efficient. There are two rendering modes that can be used.

Offscreen rendering frame rate control

You can stop or continue the rendering as well as set the frame rate using the setFrameRate() method.

Offscreen rendering maximum frame rate with CPU shared memory

When webPreferences.offscreen.useSharedTexture is false, the maximum frame rate is 240 because greater values bring only performance losses with no benefits.

Offscreen rendering frame generation when idle

When nothing is happening on a webpage, no frames are generated.

GPU accelerated rendering modes

GPU accelerated rendering means that the GPU is used for composition. The benefit of this mode is that WebGL and 3D CSS animations are supported. There are two different approaches depending on the webPreferences.offscreen.useSharedTexture setting.

GPU shared texture rendering mode

Used when webPreferences.offscreen.useSharedTexture is set to true. This is an advanced feature requiring a native node module. The frames are directly copied in GPU textures, so this mode is very fast because there is no CPU-GPU memory copies overhead, and you can directly import the shared texture to your own rendering program.

CPU shared memory bitmap rendering mode

Used when webPreferences.offscreen.useSharedTexture is set to false (default behavior). The texture is accessible using the NativeImage API at the cost of performance. The frame has to be copied from the GPU to the CPU bitmap which requires more system resources, thus this mode is slower than the Software output device mode. But it supports GPU related functionalities.

Software output device rendering mode

This mode uses a software output device for rendering in the CPU, so the frame generation is faster than shared memory bitmap GPU accelerated mode. To enable this mode, GPU acceleration has to be disabled by calling the app.disableHardwareAcceleration() API.

Subscribe to frame updates in offscreen window with paint event

To subscribe to frame updates in an offscreen window, use the 'paint' event on webContents. The event listener receives the event, dirty area, and image parameters. Example: win.webContents.on('paint', (event, dirty, image) => { ... })

Offscreen rendering example with paint event

const { app, BrowserWindow } = require('electron/main') const fs = require('node:fs') const path = require('node:path') app.disableHardwareAcceleration() function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { offscreen: true } }) win.loadURL('https://github.com') win.webContents.on('paint', (event, dirty, image) => { fs.writeFileSync('ex.png', image.toPNG()) }) win.webContents.setFrameRate(60) console.log(`The screenshot has been successfully saved to ${path.join(process.cwd(), 'ex.png')}`) } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) This example shows how to create an offscreen window, handle paint events to capture frames, and save them as PNG images.

Give your agent this brain