Browser Rendering: Calculating Draw Properties
Blink2865 Loka 2025

Browser Rendering: Calculating Draw Properties

The source provides an extensive explanation of the internal browser rendering mechanism used in Blink and Chrome, specifically focusing on the CalculateDrawProperties algorithm. This process translates high-level web features, such as CSS transforms and opacity, into low-level GPU commands. Crucially, the system relies on specialized property trees (Transform, Clip, Effect, and Scroll trees) to efficiently cache geometric and visual data, preventing repeated traversals of the layer structure. Before calculating individual layer properties, the algorithm updates global factors like page scale and elastic overscroll to ensure accurate composition. Finally, it computes the exact draw properties for visible layers and determines which layers require render surfaces for complex effects like filtering or blending, thereby generating the final list of surfaces and layers for the GPU to process.


Jaksot(417)

blink::PropertyTreeManager

blink::PropertyTreeManager

bridges Blink property trees → cc property trees. Given Blink’s Transform/Clip/Effect/Scroll nodes (from paint property trees), this class creates/updates the cc counterparts (cc::TransformNode, cc::C...

10 Loka 202546min

blink::PaintArtifactCompositor

blink::PaintArtifactCompositor

turns chunks into compositor layers & updates cc property trees. Consumes the new PaintArtifact and does the layerization and property‑tree updates required for compositor draw. It supports fast paths...

10 Loka 202529min

blink::PaintChunk and blink::DisplayItemList

blink::PaintChunk and blink::DisplayItemList

grouping and content. PaintChunk: groups sequential display items that share the same property‑tree state and cull/visibility; it’s the unit we layerize and invalidate.DisplayItemList: the recorded Sk...

10 Loka 202537min

blink::PaintArtifact

blink::PaintArtifact

the immutable “what to draw” package for this frame. A PaintArtifact is the product of Blink painting: a DisplayItemList plus an ordered vector of PaintChunks. It is immutable post‑creation and design...

10 Loka 202531min

blink::PaintController

blink::PaintController

builds the display list + paint chunks and manages caching. As painters call into GraphicsContext, they also drive a PaintController which groups drawing into display items and paint chunks (each keye...

10 Loka 202529min

blink::GraphicsContext

blink::GraphicsContext

immediate drawing API that records to a display list. Painters for layout objects use GraphicsContext to “draw”—but in modern Blink those calls get recorded into a display list (PaintRecord) backed by...

10 Loka 202544min

blink::TransformPaintPropertyNode / ClipPaintPropertyNode / EffectPaintPropertyNode / ScrollPaintPropertyNode

blink::TransformPaintPropertyNode / ClipPaintPropertyNode / EffectPaintPropertyNode / ScrollPaintPropertyNode

These are the nodes within those four trees. Every piece of painted content (a “paint chunk”) is associated with a tuple of (Transform, Clip, Effect, Scroll) nodes—its PropertyTreeState. This precisel...

10 Loka 202533min

blink::PaintPropertyTreeBuilder

blink::PaintPropertyTreeBuilder

builds/updates paint property trees.Consumes the layout/fragment data and produces the four paint property trees (Transform, Clip, Effect, Scroll) for the current frame. These trees encode coordinate ...

10 Loka 202547min