Rendering

As explained in CSS in Depth, Second Edition

Rendering is the process of converting computed document styles and content into pixels displayed on a screen.

Rendering converts computed styles and document content into pixels through three stages: layout, paint, and composite. section 16.3.1

The pipeline proceeds as follows:

• Layout calculates each element’s size and position, including the effects of document flow and DOM changes. section 16.3.1
• Paint draws text, images, borders, and shadows into memory-based layers. section 16.3.1
• Composite combines painted layers; suitable layers may be sent to the GPU for hardware acceleration. section 16.3.1

Changing size versus color

Changing an element’s width or height requires layout recalculation and may reflow surrounding content. Changing its background color requires repainting but does not require layout recalculation, making it less computationally intensive. section 16.3.1

Figure 16.12 The three stages of the rendering pipeline

Use the pipeline diagram to trace how computed styles become displayed pixels. section 16.3.1

How CSS in Depth, Second Edition covers it

How deep it goes

Breaks rendering into layout, paint, and composite, detailing reflow, repainting, layers, and GPU use.

Examples

Contrasts changing an element’s dimensions with changing its background color and their different recalculation costs.

What it assumes

Assumes computed styles and document content, while defining the rendering stages from their browser effects.

What you can do after

Diagnose whether a visual change triggers layout recalculation, reflow, repainting, or layer-based processing.

How it connects

Connects rendering with layout, paint, composite, document flow, the DOM, layers, GPU, and hardware acceleration.

liveBookmanning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Web Design Playground, Second EditionRendering is the process of interpreting web document code and producing its visual representation on a device.
• 

  liveBookmanning.com
  React Quickly, Second EditionA render method is a component method that returns the element tree representing the component's user-interface output.
• 

  liveBookmanning.com
  Web Components in ActionA render method is a component method that returns the markup representing the component's rendered content.

Compare how 4 books explain rendering →

Related concepts

• painthas part · Paint is the browser rendering stage that converts styled document content into visual output.
• layouthas part · A layout is the arrangement and positioning of content or interface elements within a page, screen, or other visual area.
• GPUused by · A graphics processing unit (GPU) is a processor designed for highly parallel computation, especially graphics and data-parallel workloads.
• stateuses · State is information or a configuration describing the condition of a system, entity, or computation at a particular time and potentially influencing subsequent behavior or decisions.
• parsingcontrasts with · Parsing is the analysis of input according to structural or syntactic rules to identify its components and produce a structured, usable representation.

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.