This is the fourth day of my participation in Gwen Challenge.

Navigate to a new page based on the URL. The main process is network request and page rendering.

Network request process

DNS lookups

On the DNS server, find the IP address of the server corresponding to the domain name.

Establish a connection to the server

The browser establishes a connection with the server through TCP’s “three-way handshake.”

The TLS negotiations

For security reasons, most web pages use HTTPS.

The response

“Time to First Byte” (TTFB) is the Time between the user making the request by clicking on the link and receiving the First HTML package. The first piece of content is usually 14KB of data.

Once the browser receives the first piece of data, it can begin parsing the received information. “Predictive parsing”, “parsing” is the step by which the browser converts the data received over the network into DOM and CSSOM, which are rendered as pages on the screen by the renderer.

Browser rendering flow: Key rendering paths

1 a DOM

The first step is to process the HTML tags and construct the DOM tree.

When it comes to non-blocking resources, such as images, the browser requests them and continues parsing. Parsing can also continue when a CSS file is encountered. Blocking resources, such as JS code or files without async or defer properties, block rendering and stop parsing the HTML.

The preload scanner parses the available content and requests high-priority resources, such as CSS, JavaScript, and Web fonts. It retrieves the resources in the background so that by the time the main HTML parser reaches the requested resources, they may already be running or have been downloaded.

2 Build the CSSOM tree

The second step is to process the CSS and build the CSSOM tree.

3. Construct Rendering Tree

The third step is to combine the DOM and CSSOM into a Render tree. The computed style tree or Render tree is built from the root of the DOM tree, traversing each visible node.

4 layout

The fourth step is to run the layout on the render tree to calculate the geometry of each node. Layout is the process of determining the width, height, and position of all nodes in the rendering tree, as well as the size and position of each object on the page. Backflow is the determination of any subsequent size and location of any part of a page or the entire document.

5 draw

The individual nodes are drawn onto the screen, and the first one that appears is called First Meaningful Paint.

To ensure smooth rendering: smooth scrolling and animation, everything that takes up the main thread, JS code, and backflow and drawing must be done by the browser in 16.67 milliseconds.

Drawing can decompose elements in a layout tree into multiple layers. Promoting content to a layer on the GPU (rather than the main thread on the CPU) improves drawing and redrawing performance.

It has its own separate layer of elements: video, canvas, any CSS property with opacity, 3D conversion, will-change.

When parts of a document are drawn in different layers, overlapping each other, compositing must be done to ensure that they are drawn to the screen in the correct order and the content is displayed correctly.

interaction

Redraw and reflow

Backflow: Relayout. Changing size and position can cause backflow. Display: None causes backflow and redraw because the layout and color of the page have changed.

Redraw: redraw. Changing the color background and visibility causes redrawing.

Backflow will certainly cause repainting, and repainting will not necessarily cause backflow.

The resources

Developer.mozilla.org/zh-CN/docs/… www.cnblogs.com/chanshuyi/p… Juejin. Cn/post / 684490… Stackoverflow.com/questions/3… Juejin. Cn/post / 684490…