Skip to content
Blink's LayoutNG: Fragment Tree Generation Deep Dive episode artwork

Sep 5, 2025 1 hr 2 min

Blink's LayoutNG: Fragment Tree Generation Deep Dive

from Blink286 Hosted by Free Debreuil

This lecture outline provides an in-depth overview of LayoutNG's fragment tree generation within Blink, Google Chrome's rendering engine. It highlights the transition from the legacy layout system, which struggled with content fragmentation, to LayoutNG's modern approach that produces an immutable fragment tree as a direct output of the layout process. The document details the concepts and relationships of fragments to the Document Object Model (DOM) and legacy LayoutObjects, explaining how fragments accurately represent split or repeated elements across lines, columns, or pages. Furthermore, it describes the construction process of the fragment tree, including the roles of various C++ classes like NGLayoutInputNode, NGFragmentBuilder, and NGPhysicalFragment, and illustrates how different CSS layout models (block, inline, flex, grid, multicolumn, and pagination) leverage this unified fragmentation model. Finally, the outline explains the integration of the fragment tree into the rendering pipeline, emphasizing its role in simplifying painting, hit-testing, and improving performance and correctness over the previous system.

Episode details come from the podcast's RSS feed.

Embed this episode

Ready to play

Blink's LayoutNG: Fragment Tree Generation Deep Dive

0:00 1:02:58

No transcript yet.

Requests help us decide what to transcribe next.

Frequently asked questions

How long is this episode of Blink286?

This episode is 1 hour and 2 minutes long.

When was this Blink286 episode published?

This episode was published on September 5, 2025.

Can I download this Blink286 episode?

Yes. Use the download control on the episode player to save the publisher-provided media file.