Blink286

Blink's LayoutNG: Fragment Tree Generation Deep Dive


Listen Later

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 NGLayoutInputNodeNGFragmentBuilder, 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.


...more
View all episodesView all episodes
Download on the App Store

Blink286By Free Debreuil