Blink Rendering Pipeline — Style, Layout, Paint
How Chromium's Blink engine resolves CSS, lays out elements, and paints
Upstream research and deep dives (e.g. browser engine internals) informing design decisions.
Voir toutes les étiquettesHow Chromium's Blink engine resolves CSS, lays out elements, and paints
Key terms and concepts from the Chromium compositor (cc/) and display
The Chromium compositor (cc/) is responsible for taking painted content
Research findings from reading the Chromium source code (chromium/cc/,
The scheduler orchestrates the frame production pipeline. It receives
The damage tracking system computes the region of each render surface that
Research document describing the mechanisms Chromium/Blink uses to mark
How Chromium optimizes visual effects (blur, shadow, opacity, blend modes,
How Blink fetches external stylesheets, surfaces them to the parser, prevents cycles, and orders imported rules during cascade build.
How Chromium fetches, caches, and integrates external resources (images, stylesheets, fonts) into the rendering pipeline.
How Chromium maintains smooth interaction (scroll, pinch-zoom) even when
Memory Budget
How Chromium stores and accesses per-node data across its rendering
How Chromium records, stores, and replays paint operations. The recording
Complete mechanism for how Chromium handles pinch-to-zoom: the immediate
The compositor stores layer properties (transform, effect, clip, scroll) in
A render surface is an offscreen GPU texture that a subtree is composited
Source-level analysis of how Chromium handles rendering resolution during
How Blink's SVG implementation is split across third_party/blink/renderer/.
Two mechanisms that create cross-tree references in SVG:
How SVG elements appear in Blink's accessibility (AX) tree. SVG is a
Every animatable SVG attribute is exposed to JavaScript as an
How Blink animates SVG. Two engines coexist: SMIL (`, `,
Three deployment modes for SVG content, with differing pipelines:
How Blink resolves and applies the clip-path property — both the SVG
How Blink tracks transforms and coordinate spaces from the outer `` down
How Blink resolves a point in SVG space to an element. Different from HTML
A snapshot of which Blink rendering systems SVG participates in fully, which
How fill="url(#id)" and stroke="url(#id)" resolve into Skia shaders. Paint
How ` data becomes an SkPath`, and how SVG stroke properties
How Chromium handles the SVG `` element. The pattern element is a
The end-to-end pipeline for rendering SVG inside Blink. Emphasis on where the
How Blink (Chromium's rendering engine) renders SVG. These documents describe
`, , , ` — the four non-paint-server
SVG text is the most intricate part of SVG rendering because it combines:
How `` is laid out and painted in Blink, with side-by-side notes on
Tiling Model
Deep dive into Chromium's tiling implementation from source (cc/).
How Chromium/Blink and resvg/usvg implement `` —
How Blink (and resvg/usvg) decide which rectangle to repeat and
A cross-engine comparison of how SVG rendering is factored across three