![]() ![]() But first, let's step back and consider what the inputs and outputs of layout are. We found that this architecture resulted in many classes of issues, which we'll describe below. When the layout phase of the rendering pipeline was run, we'd then clean the tree, walk any dirty objects, then run layout to get them to a clean state. When a change in style occured, we marked that object as dirty and likewise all of its parents in the tree. These objects were kept around between renders. Previously, Blink's layout tree was what I'll refer to as a "mutable tree".Įach object in the layout tree contained input information, such as the available size imposed by a parent, the position of any floats, and output information, for example, the final width and height of the object or its x and y position. # A 30,000 foot view of layout engine architectures In this post, I'll explain how a large architecture change like this can reduce and mitigate various types of bugs and performance issues. LayoutNG was an opportunity for me to help systematically fix these issues within Blink's layout system, and represents the sum of many engineers' efforts over the years. As a front-end engineer I constantly ran into browser inconsistencies, performance issues, rendering bugs, and missing features. ![]() My prior experience has guided me personally while on the Blink team. I was comforted by the fact a lot of "recovering front-end engineers" made the transition to being a "browser engineer" before me. I'm grateful for the time given to me during this period. Even today, I only understand a relatively small portion of it. After around five years in that role I took a large gamble switching to the Blink team, effectively learning C++ on the job, and attempting to ramp up on the massively complex Blink codebase. Before working on the Blink team, I was a front-end engineer (before Google had the role of "front-end engineer"), building features within Google Docs, Drive, and Gmail. I'm Ian Kilpatrick, an engineering lead on the Blink layout team, along with Koji Ishii. ![]() Check out the rest of the series to learn more about RenderingNG, the architecture, key data structures, and VideoNG. ![]() This post is a part of a series on the Chromium rendering engine. ![]()
0 Comments
Leave a Reply. |