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

There is a knowledge called browser basics that you don’t know

1. Browser navigation process

This is a favorite interview question: What happens between entering the URL and presenting the page? So this section is going to focus on that

1.1 What happens between entering the URL and presenting the page?

1.1.1 Basic Process Description

  • First, the user enters a request from the browser process.
  • The network process then initiates a URL request;
  • After the server responds to the URL request, the browser process starts preparing the rendering process again;
  • After the rendering process is ready, the page data needs to be submitted to the rendering process first, which is called the submission document stage.
  • After receiving the document information, the rendering process parses the page and loads sub-resources to complete the rendering of the page.

1.1.2 User Input

When a user enters a query keyword in the address bar, the address bar determines whether the entered keyword is the search content or the requested URL.

  • For search content, the address bar uses the browser’s default search engine to synthesize new urls with search keywords.
  • If the input content complies with THE URL rules, for example, tangjievic. Top, the address bar combines the content with the protocol according to the rules to create a complete URL, such as tangjievic.

Here’s an article from the Nuggets about Ali’s interview questions on this part of the knowledge

At this point, Ali’s blessing loving interviewer asks a soul question: why should URLS be resolved? What are the rules for DNS queries?

On why urls should be parsed:

  • Because web standards stipulate that urls can only be letters and numbers, and some other special symbols(- _. ~! * '(); : @ & = + $, /? # []
  • The URL then has a certain format for the address bar parameters, and when your parameters and values conflict with this format, the browser will escape
  • To sum up, URL has its own set of encoding rules. Therefore, DNS query is started when it is judged that user input meets THE URL rules

1.1.3 URL Request Process

After identifying the URL, the browser process sends the URL request to the network process through inter-process communication (IPC). After receiving the URL request, the network process initiates the actual URL request process here

Process:

  1. First, the network process looks up whether the local cache has cached the resource. If there are cached resources, then directly return the resources to the browser process (for the system will check the hosts file to see if there are records, if there are corresponding mapping IP will be returned).
  2. If the resource is not found in the cache, the network request flows directly. The first step before the request is to perform a DNS resolution to get the server IP address for the requested domain name. If the request protocol is HTTPS, you also need to establish a TLS connection.

The next step is to establish a TCP connection with the server using the IP address. After the connection is established, the browser side will construct the request line, request information, etc., and attach the data related to the domain name, such as cookies, to the request header, and then send the constructed request information to the server.

  1. After receiving the request information, the server generates response data (including response line, response header, and response body) based on the request information and sends it to the network process. After the network process receives the response line and header, it parses the contents of the header

What is the DNS query rule?

  1. Recursive query

If the local DNS server does not know the IP address of the domain name being queried, the local DNS server sends a query message to the root DNS server as a DNS client. If the root DNS server does not know the IP address of the domain name being queried, the root DNS server sends a query message to the top-level DNS server again until the final result is displayed.

  1. Iterative recursion combined with query

The current mainstream way Host and the local domain name server) USES a recursive query, the local server and other server using iterative queries, iterative query specific refers to: when the root domain name server receives the local domain name server iterative query request packet, or given to the IP address of the query, or tell the local server: “Which DNS server should you query next?”

Here is:

With the DSN problem solved, we are back on track to talk about other problems with the process

  • (1) Redirect

Upon receiving the response header from the server, the network process begins to parse the response header. If the status code returned is 301 or 302, the server needs the browser to redirect to another URL. The network process reads the redirected address from the Location field in the response header, then initiates a new HTTP or HTTPS request and starts all over again.

The server returns a response header with a status code of 200, which tells the browser that everything is fine and that it is time to proceed with the request.

  • (2) Response data type processing

The Content-Type is a very important field in the HTTP header that tells the browser what Type of response body data the server is returning. The browser then uses the value of the Content-Type to decide how to display the response body Content.

1.1.4 Preparing the render process

By default, Chrome assigns a render process to each page, meaning that a new render process is created for each new page opened. However, there are some exceptions, in some cases the browser will allow multiple pages to run directly in the same render process.

When can multiple pages be running in a render process at the same time?

If a new page is opened from one page and belongs to the same site as the current page, the new page will reuse the parent page’s rendering process

1.1.5 Submitting documents

First, it should be clear that the “document” here refers to the response body data for the URL request.

The “submit document” message is sent by the browser process. After receiving the “submit document” message, the renderer process will establish a “pipeline” with the network process to transfer data. After the document data transfer is complete, the renderer process returns a “confirm submit” message to the browser process. After receiving the “confirm submission” message, the browser process updates the browser interface status, including the security status, the URL of the address bar, the historical status of forward and backward, and the Web page. As shown in figure:

This explains why, when you type an address into your browser’s address bar, the previous page doesn’t disappear immediately, but instead takes a while to load before the page is updated.

1.1.6 Rendering stage

Once the document is submitted, the renderer process begins page parsing and child resource loading

Basically: building a DOM tree, styling, layout stages, layering, drawing, chunking, rasterization, and composition, as detailed below

2. Rendering process

2.1 Building a DOM tree

The input for building a DOM tree is a very simple HTML file, which is parsed by an HTML parser and finally outputs the DOM as a tree structure.

2.2 Style Calculation

  1. When the rendering engine receives CSS text, it performs a conversion operation that converts the CSS text to styleSheets, a structure that the browser understands.
  2. Transform property values in the stylesheet to standardize them
  3. Figure out the specific style of each node in the DOM tree

After the above three steps, you have a CSS rule tree

2.3 the layout

  1. Calculates the geometric positions of visible elements in the DOM tree

  2. Create a layout tree. All invisible nodes in the DOM tree are not included in the layout tree.

Layout calculation after the above 2 steps basically formed the basic layout

2.4 the layered

For complex 3D transformations, scrolling, and z-ordering with z-indexing, the rendering engine will need to create a LayerTree for each node. If the concept of layers in Photoshop is the same.

This is also an important navigation point for Web page optimization

2.5 draw

After building the DOM tree, CSS rule tree, layout, layering, such a basic rendering tree is formed, then start to draw

  • Generate a draw list for each layer and submit it to the composition thread.
  • The composite thread divides the layer into blocks and converts the blocks into bitmaps in the rasterized thread pool.
  • The composite thread sends the draw block command to the browser process.
  • The browser process generates the page from the draw block command message and displays it on the monitor.

There’s a very important point about web front-end optimization and the concepts of the rendering pipeline — “rearrange,” “redraw,” and “compose.”

    1. Updated element geometry (rearranged)

As you can see from the above figure, if you modify the geometry of an element using JavaScript or CSS, such as changing the width, height, etc., then the browser will trigger a rearrangement of the layout, followed by a series of sub-stages called rearrangement. Of course, reordering requires updating the entire rendering pipeline, so it’s also the most expensive.

Backflow is the process by which the browser recalculates the location and geometry of elements in a document in order to re-render part or all of the document. Because backflow can cause the entire DOM tree to be restructured, performance is affected.

The way to avoid large backflow is to position the element and create a separate layer once to reduce the impact of backflow

  • 2. Update the element’s draw attribute (redraw)

As can be seen from the figure, if you change the background color of the element, the layout stage will not be performed, because there is no change in the geometry position, so you directly enter the drawing stage, and then perform a series of subsequent stages, this process is called redraw. Redraw eliminates layout and layering, so it is more efficient than rearrange.

3. Direct Composition Phase The rendering engine skips layout and drawing and only performs subsequent composition operations, which we call composition

The transform of CSS is used to animate the animation, which avoids the rearrangement and redraw phases and executes the compositing animation directly on the non-main thread. This is the highest efficiency, because it is composed on the non-main thread, does not occupy the main thread resources, and avoids the layout and drawing two sub-stages, so compared with redraw and rearrangement, composition can greatly improve the drawing efficiency