Browser repaint

As explained in Build a Frontend Web Framework (From Scratch)

The browser rendering operation that redraws pixels after a document or style change.

A browser repaint redraws pixels after the document or styles change. It can accompany DOM updates and reflow, consuming resources when changes affect the rendered page. section 1.3.2

Use repaint behavior to understand whether an interface update is narrowly targeted:

• The browser may repaint areas that moved or changed, even when the framework made no corresponding DOM patch. section 8.4.2
• A poorly optimized TODO application repaints the entire page whenever a character is typed. section 8.4.2
• A more selective implementation repaints only the input text and its label during the same interaction. section 8.4.2

Watching a typed character

Enable Chrome DevTools' paint flashing in the Rendering tab, then type in a TODO input. Green rectangles reveal the pixels the browser repaints. Compare this with the DOM changes reported by the Elements tab and the framework's patchDOM() function. section 8.4.2

Figure 8.21 With the new version of your framework, only the input field’s text and the field’s label are repainted when you type a character in the input field.

Shows the selective repaint pattern: typing repaints only the input field's text and its label. section 8.4.2

How Build a Frontend Web Framework (From Scratch) covers it

How deep it goes

Distinguishes DOM patches from paint flashes and demonstrates observation, but does not detail the rendering engine's internals.

Examples

Compares whole-page and selective repaints while typing in two versions of a TODO application.

What you can do after

Diagnose repaint and DOM-update behavior with Chrome paint flashing, element inspection, and patchDOM() breakpoints.

How it connects

Connects repaint with DOM patching, reflow, virtual DOM, and framework strategies for updating views.

liveBookmanning.com

Read Build a Frontend Web Framework (From Scratch) on liveBook Get the book at manning.com

Related concepts

• useLayoutEffectcontrasts with · useLayoutEffect is a React Hook that runs an effect synchronously after DOM mutations and before the browser paints.
• browserproduced by · A web browser is software that retrieves, interprets, and renders web resources, executes supported web content, and enables interaction with web pages and applications.
• DOM manipulationproduced by · DOM manipulation is the programmatic inspection or modification of nodes, attributes, content, styles, or structure in a document object model.

This explainer was generated by Manning's knowledge graph from the text of Build a Frontend Web Framework (From Scratch). The section links point to the parts of the book it draws on.