This is the 13th day of my participation in Gwen Challenge

Before the article

What happens between entering the URL and presenting the page? (Navigation Process)

Juejin. Cn/post / 697349…

Rendering process (rendering pipeline)

Once the document enters the “confirm submit” state, the rendering process begins page parsing and subresource loading.

According to the chronological order of rendering, the pipeline can be divided into the following sub-stages: DOM tree building, style calculation, layout stage, layering, drawing, chunking, rasterization, and composition.

Building a DOM Tree

Because browsers can’t understand and use HTML, you need to transform HTML into a structure that browsers can understand, called a DOM tree.

// You can view the DOM tree structure using document
document
Copy the code

Recalculate Style

Style calculation is done in three steps to calculate the specific style of each element of a DOM node.

  1. Convert CSS to a structure that browsers can understand

    Like HTML files, browsers don’t understand plain-text CSS directly. Instead, we convert the three main sources of styleSheets (external CSS referenced by the link tag, CSS inside the style tag, and CSS embedded in the element style attribute) into a structure that browsers can understand: styleSheets.

    StyleSheets this part, also has another name, called CSSOM, learning li Bing big boss this part, Li Bing big boss said there is no browser source code CSSOM, maybe this name is commonly known as the convention? For the sake of uniformity, though, the term styleSheets will be used in the future, not CSSOM.

    Document. StyleSheets, you can view the structure of styleSheets(also known as CSSOM)
document.styleSheets
Copy the code

    StyleSheets includes styles from all three of the CSS sources above, and the structure has both query and modification capabilities, which provide the basis for future style manipulation.

  2. Transform property values in the stylesheet to standardize them

    As front-end classmate, should all know, there are many different attribute values in CSS text, on behalf of the size of the em, for example, on behalf of the color of the blue, bold, these type numerical value is not easy to be understood rendering engine, so this step, rendering engine to convert all values to rendering engine easy to understand, the calculated value of standardization, standardization is also called the attribute value.

    /* Original CSS property value */
body { font-size: 2em; }
p {color: blue; }span {display: none; }div {font-weight: bold; }div p {color: green; }div {color:red; }/* Standardized CSS property values */
body { font-size: 32px }
p {color: rgb(0.0.255)}
span {display: none}
div {font-weight: 700}
div p {color: rgb(0.128.0)}
div {color: rgb(255.0.0)}
Copy the code

  3. Figure out the specific style of each node in the DOM tree

    The purpose of the style calculation stage is to calculate the specific style of each element in the DOM node. In the calculation process, two rules of CSS inheritance and cascading need to be observed.

    CSS cascading and inheritance

The final output of this phase is the style of each DOM node, stored in the ComputedStyle structure.

The layout phase

With the DOM tree and the styles in the DOM tree, the next step is to figure out the geometry of the visible elements in the DOM tree, also known as the layout.

  1. Creating a layout tree

    The layout tree is a tree that contains only all visible nodes, so elements like the head tag, or those using the display: None attribute, cannot be included in the layout tree.

  1. Layout calculation

    With a layout tree, you can calculate the geometric position of the nodes in the layout tree.

    When a layout operation is performed, the geometry of the layout is written back into the layout tree, so the layout tree is both input and output. (This is an unreasonable area in the layout phase, where input and output are not clearly distinguished.)

    To address this problem, the Chrome team is refactoring the layout code. The next generation of layout system, called LayoutNG, attempts to separate input and output more clearly, thus making the newly designed layout algorithm simpler.

layered

Because pages have many complex effects, such as 3D transformations, page scrolling, or z-ordering using z-index, the rendering engine also needs to generate a LayerTree for these specific nodes. It’s very similar to the concept of layers in PhotoShop.

Select the Layers TAB in Chrome Developer Tools to visually view the Layers on a page.

In general, the layout tree does not contain a layer for each node, and if a node has no corresponding layer, then it belongs to the parent node’s layer.

When an element meets one of the following two criteria, the rendering engine elevates that element to a separate layer.

  1. The element that has a cascading context attribute

    Specific rules that meet the requirements of the cascading context can be read in the MDN document below. For example, explicit positioning attributes, transparent attributes, CSS filters, and Z-index all meet the requirements of the cascading context.

    Cascading context

  2. Areas that need to be clipped will also be created as layers

    With overflow, the rendering engine creates a separate layer for the text section and the scroll bar (if any) when content spills out of the box area and is clipped.

Draw list (composed of draw instructions)

Once the layer tree is built, the rendering engine will draw each layer in the tree, much like a canvas.

It will divide a layer drawing into many small drawing instructions (very similar to the drawing instructions of canvas) according to the steps of drawing each layer, and finally form a list of drawing instructions in order.

You can use the Chrome Developer Tool’s “Layers” TAB and select the “Doucment” layer to see a detailed drawing list.

block

A draw list is simply a list of draw orders and draw instructions. The actual drawing is done by the render engine’s compositing thread.

When the layer’s drawing list is ready, the main thread commits the drawing list to the compositing thread, which divides the layer into tiles, usually 256×256 or 512×512.

The compositing thread then generates the bitmap from the blocks near the ViewPort (the visible area of the page on the screen is called viewport-viewport), and the bitmap generation is done by a rasterization pool within the renderer process.

Rasterize (raster)

A map block is the smallest unit for rasterization, which means converting a map block into a bitmap.

In the rendering process, there is a rasterization process pool, which will preferentially take the map blocks near the ViewPort (the visible area of the page on the screen is called viewport-viewport) for rasterization. The rasterization process will be accelerated by GPU, and the bitmap generated after rasterization will be stored in the MEMORY of GPU.

Composition and rendering

Once all the tiles have been rasterized, the composition thread generates a command to draw the tiles — “DrawQuad” — and submits the command to the browser process.

The browser process has a component called viz that receives DrawQuad commands from the compositing thread, draws its page contents into memory, and displays them on the screen.

At this point, the process from entering the URL to presenting the page is complete.

Relevant concepts

As you can see from the rendering pipeline above, DOM tree building, style calculations, layout phases, and layering are all performed in the main thread of the browser.

Drawing lists, chunking, rasterization, and composite drawing are performed in other threads of the browser.

Updated element geometry (rearranged)

If you modify the geometry of an element via JavaScript or CSS, such as changing the width and height of the element, it will trigger a browser relayout. Retakes require reworking the entire rendering pipeline, which is also the most expensive.

Update the draw attribute of an element (redraw)

Through JavaScript change some elements of the background color, because the geometry properties have not changed, so the layout phase is to be carried out part, redrawn will draw stage starts from the rendering pipeline (that is, starting from the list of drawing stage), compared with rearrangement, redrawn out the layout phase (building layout tree) and layered phase, So the execution will be a little bit more efficient than the platoon operation.

Direct synthesis stage (synthesis)

If you just change a property that is neither laid out nor drawn, such as CSS’s Transform to animate, the rendering engine skips layout and drawing (that is, starting with partitioning) and only performs subsequent compositing (the pipeline from partitioning to the end is called the compositing sub-stage), a process we call compositing. This is the highest efficiency, because it is synthesized on the non-main thread, without occupying the resources of the main thread, but also avoids the three sub-stages of layout (the stage of building layout tree), layering and drawing (the drawing list is called the drawing sub-stage), so compared with redrawing and rearrangement, composition can greatly improve the drawing efficiency.

conclusion

Navigation process

  • User input

    1. The user presses Enter in the address bar to check the input (search for keywords or comply with URL rules) and assemble the complete URL.
    2. The onbeforeUnload event is executed on the current page before the unload.
    3. The browser enters the loading state.

  • The URL request

    1. The browser process sends the URL request to the network process via IPC(interprocess communication).
    2. Find the page resource cache (expiration date), the cache exists and is within the expiration date, directly returned to the browser process.
    3. If there is no page resource cache, query DNS resolution (DNS cache /DNS server) based on the URL address to obtain the IP address of the server.
    4. When you create a TCP connection (three-way handshake), the maximum number of connections in a single domain name is six. If the number exceeds the threshold, the connection is entered into the TCP queue.
    5. Send HTTP requests (request line [method, URL, protocol], request header [Cookie, etc.], request body);
    6. Receive request information (response line [protocol, status code, status message], response header, response body, etc.);
    • The 301/302 status code triggers a redirection rule that redirects according to the Location in the response header;
    • Status code 200, normal response, based on the content-Type in the response header to determine how to respond (download file, load resource, render HTML).

  • Prepare the render process

    Decide whether to reuse the renderer process based on whether it is the same site (same protocol and root domain).

  • Submit the document

    1. The browser process receives the response header data from the web process and sends a “submit document” message to the renderer process.
    2. After receiving the “submit document” message, the rendering process and the network process establish data transmission “pipeline”;
    3. When the transfer is complete, the renderer returns a “confirm submit” message to the browser process;
    4. After the browser receives the “submit confirmation” message, it removes the old document, updates the interface, address bar, navigates the historical status, etc. At this time, the small circle marking the browser loading status will change from the counterclockwise rotation of the previous URL network request to the clockwise rotation (entering the rendering stage).

Rendering (rendering pipeline)

  • Build a DOM tree

    Use a parser to convert HTML into a DOM structure that the browser can understand.

  • Style calculation

    1. Convert CSS to a structure that browsers understand -styleSheets(also known as CSSOM).
    2. Transform property values in the stylesheet to standardize them.
    3. The specific style (inheritance, cascading) of each node in the DOM tree is calculated and stored in the ComputedStyle structure.

  • Layout stage (geometric position of elements in DOM tree)

    1. Use DOM & ComputedStyle to build the layout tree (the visible elements in the DOM tree).
    2. Layout calculation.

  • layered

    1. A tree of layers (layered context, Clip, similar to layers in PhotoShop) is generated for a specific node.
    2. Elements with cascading context attributes (explicit positioning, transparency, CSS filters, Z-Index, and so on) create separate layers.
    3. Layers are also created where clipping is required.
    4. A DOM node without a layer is a parent node layer.

  • Draw list (composed of draw instructions)

    1. Enter: Layer tree;
    2. The rendering engine draws each layer in the layer tree;
    3. Split it into drawing instructions, generate drawing list, and submit it to the synthesis thread;
    4. Output: Draw a list.

  • block

    The compositing thread will divide larger and longer layers (more than one screen, most of which are not in the viewport) into tiles (256*256, 512*512).

  • Rasterization (rasterization)

    1. In the rasterization thread pool, bitmaps are generated first for blocks near viewports (rasterization performs this operation).
    2. Fast Rasterization: GPU acceleration, bitmap generation (GPU process).

  • Synthesis of drawing

    1. Draw block command — DrawQuad, submit to browser process;
    2. The Viz component of the browser process, drawn on the screen according to the DrawQuad command.

Relevant concepts

  • rearrangement

    1. Updated element geometry attributes (such as width, height, margins);
    2. Triggering a relayout, a series of substages after parsing;
    3. The updated rendering pipeline is the most expensive.

  • redraw

    1. Update elements’ draw attributes (element color, background color, border, etc.)
    2. The layout phase will not be performed (no geometric position transformation) and will go directly to the drawing phase.

  • synthetic

    1. Go straight to the compositing stage (for example, CSS’s Transform animation);
    2. The composition phase is performed directly with minimal overhead.