URL => character stream; Character stream => word (token) stream; Word stream => DOM tree; DOM tree => CSS rules; The position and size of each element are calculated. Based on style and size information, each element is graphed in memory and drawn to its appropriate location

A, apply colours to a drawing

The process of turning a model into a bitmap

Box backgrounds, borders, SVG elements, shadows, and other features are graphic classes that need to be drawn. Just as the IMPLEMENTATION of the HTTP protocol must be based on the TCP library, an underlying library is required to support this part.

Common operating systems provide an underlying library, such as The well-known Skia in Android and GDI in Windows, and common browsers create a compatibility layer to deal with platform differences.

The text in the box also needs to be supported by the underlying library, called the font library. The font library provides the basic ability to read font files by extracting glyphs from character code points.

Second, the synthesis of

The process of composition is to create a “composite bitmap” of some elements (we call it a composite layer) and render some of the child elements onto the composite bitmap.

According to the goal, the established principle is the principle of minimizing the number of draws.

Because if we change a single CSS property in JavaScript or whatever, the resultant bitmap is invalidated, and we need to redraw all the elements.

For example, <div id="a">
    <div id="b">... </div> <div id="c" style="The transform: translate (0, 0)"></div> </div>"c").style.transform = "translate(100px, 0)"; // We can draw only bitmaps of A and B and c, thus reducing the number of drawing times.Copy the code

Third, draw

Drawing is the process of “eventually drawing a bitmap onto the screen and turning it into an image visible to the naked eye”.

In general, the browser doesn’t need code to handle this process, it just needs to hand the final bitmap to the operating system.

The final bitmap is usually in video memory, but in some cases the browser simply submits a bitmap in memory to the operating system or driver, depending on the environment in which the browser is running. However, the operation of synthesizing any bitmap into this “final bitmap” is called drawing.