5- Render tree – Layout and draw

The Renderer node has just been created, and no position or size information is inserted into the Render Tree. The Layout stage is where the element geometry information is calculated. Because browsers use a streaming layout, calculating the geometry of elements is a one-time thing, and subsequent elements have little effect on the geometry of previous elements, with the exception of the table element.

Each renderer needs a layout method, and the entire process starts at the bottom of the Render tree, recursively calculating the geometry of each node. The position of the root renderer is in the upper left corner of the browser window, and the corresponding size is the size of the browser window.

There are also different types of layouts: global and incremental.

Overall style changes that affect all renderers (such as font-size) or resize Windows (resize) trigger the global layout. If only the position of the renderer changes, the entire parser does not rerender the renderer size but retrieves it from the cache.

When the renderer is marked as dirty, the incremental layout is triggered, which is asynchronous. The dirty tag marks itself and tells the parser, “I need to relayout.”

After calculating the layout, the painting phase begins, again iterating over the Render Tree, having each node trigger its own paint function, and then using the UI Infrastructure Component to draw the entire page. Each element is drawn in the order of background color, background image, border, children, and outline. We know that redrawing can be triggered in subsequent parsing scripts, and the principle of drawing is that the browser will respond as minimally as possible when the style changes.

The rendering process is a bit more sophisticated: in the early days (the earliest versions of Chrome), the rendering process was to convert the render Tree information into each pixel on the window, which is called rasterizing. But in this way, only the image of the current window is drawn. When the window moves, the undrawn part will be deleted.

But today’s browsers are more likely to use compositing, which essentially divides a page into different layers and deletes them, while presenting them as a new image that creates a good basis for web animation.

Through the above so much process, finally let you and I see, designers and engineers work hard masterpiece ~

Next article

reference