Paint

What is a Paint?

A browser paint is when the browser draws a pixel to the screen. If the browser takes too long to paint your app, won't feel responsive to user interactions.

The human eye can see 60 frames per second. That means we see 1 frame every 16ms. For a user interface to feel responsive, the browser must paint a frame at least every 16ms. If it takes longer than that, the browser will skip the frame and the user will see a janky animation.

What slows down painting?

Painting is a expensive operation. The browser has to calculate the layout of the page, then draw the pixels to the screen. If the browser has to do a lot of work to paint a frame, it will take longer to paint.

Paint Plugin

Paint timings are so important for responsive user interfaces that we've built a plugin to measure them. The paint plugin measures the time it takes for the browser to paint a frame after a user interaction.

Usage

Browser

index.js

import { init, paint } from "@palette.dev/browser";

init({
  // ...
  plugins: [paint()],
});

Electron Renderer

renderer.js

import { init, paint } from "@palette.dev/electron/renderer";

init({
  // ...
  plugins: [paint()],
});

Collected Events

• Keydown to Paint: The time from a user keydown event to browser paint.
• Scroll to Paint: The time from a user scroll event to browser paint.
• Click to Paint: The time from a user click event to browser paint.
• Mousemove to Paint: The time from a user mousemove event to browser paint.

Palette does not collect privacy-centric data like textarea or keypress values. see the privacy docs for more details.

Precision

Palette collects interaction timings for paint metrics directly from the browser using the EventTiming API. To prevent timing attacks, the browser rounds paint timings to the nearest 8ms. Because this, all interaction timings will be +/-4ms from the actual paint time.