This question is about the process from entering the URL to rendering the page and the classic question is about your Web basics

I think as a primary front-end, you have to have a clear understanding of the general process and then go through the details step by step

The process is as follows:

The DNS

And since we’re typing in a domain name, when we need data communication it’s really between the client and the server and the server is the server so we need an IP address for the server. The Domain Name System (DNS) is a System that maps Domain names to IP addresses. The process of resolving a Domain Name into an IP address is called DNS resolution

  • How does the browser know about DNS resolution servers?

You can view the current DNS server IP address in the local network Settings

  • DNS server is usually provided by broadband service providers so how does the access device get the DNS server address?

With dynamic Host Configuration Protocol (DHCP), when a device is connected to a router, the router assigns it an IP address through DHCP and tells it to the DNS server:

  • Does DNS have cache?

Some browsers will remember the domain name that has been parsed in the cache and directly remove the cache next time, without DNS resolution.

A TCP connection

TCP Transmission Control Protocol (TCP) connections are designed to ensure orderly information without packet loss and reliable data Transmission

The process of experience is divided into:

  1. Three-way handshake

  1. The data transfer
  2. Four times to wave

See TCP three-way handshake and four-way wave for details

HTTP requests and responses

The HTTP request

After the TCP connection is established, the browser and server can communicate

The HTTP request process is that the browser sets the request packet and sends it to the specified port on the server through TCP

Request message = request line + request header + blank line + request body

Blank line: The protocol specifies that the request header and the request body must be separated by a blank line

Request line = request method + request path + protocol version

// The request method is GET, the path is the root path, and the HTTP version is 1.1
GET / HTTP/1.1
Copy the code

The request header is some additional information, usually in the form of key-value pairs

Take accessing www.baidu.com/ as an example. The common fields in the request header are

Host: www.baidu.com
Connection: keep-alive
Cache-Control: max-age=0
User-Agent: Mozilla/5.0.Accept:text/html,application/xhtml+xml,application/xml; q=0.9.Cookie:...Copy the code

Request body

For POST requests, the required parameters are not in the URL, so you need a carrier, which is the request body

GET generally has no request body

The HTTP response

After receiving the request, the server will perform corresponding processing according to the path matched by the URL, and finally return the page resources required by the browser. After the processing, the browser receives a response packet

Response message = response line + response header + blank line + response body

Status line = Protocol version + Status code + Status description

HTTP/1.1 200 OK
Copy the code

The response header, like the request header, also contains some information returned by the server

Take accessing www.baidu.com/ as an example. The common fields in the response header are

Cache-Control: private
Connection: keep-alive Content-Encoding: gzip Content-Type: text/html; charset=utf-8
Date: Tue, 09 Mar 2021 11:16:47 GMT
Expires: Tue, 09 Mar 2021 11:16:46 GMT
Server: BWS/1.1.Copy the code

HTML lexical, syntax parsing

So once you get the HTML because the browser doesn’t know what HTML is it’s just a stream of characters

So the browser needs to translate the character stream parser into a structure that the browser recognizes and that data structure is what the DOM tree does in two steps

Lexical analysis: the initial parsing of the character stream into “words” that we can understand, which is called token. (Like HTML going from plain white to highlighted?)

Syntax analysis: start and end tag pairing, attribute assignment, parent-child relationship connection, form a DOM tree.

In Chrome, for example

Once you build a DOM tree, you also need to determine the layout of the elements so you start parsing the CSS to generate a CCSOM tree and then synthesize it into a render tree

Official Google Docs

Apply colours to a drawing

With the render tree, we are ready to enter the “Layout” phase. (layout)

This is the stage where the browser calculates their exact position and size within the viewport of the device – this is the “layout” stage, also known as “automatic rearrangement.”

The output of the layout process is a “box model” that accurately captures the exact position and size of each element within the viewport: all relative measurements are converted to absolute pixels on the screen.

This information can then be passed to the final stage to convert each node in the render tree into an actual pixel on the screen. This step is often called “drawing” or “rasterizing.” It involves drawing text, colors, images, borders, and shadows. (Paint)

And then there’s the web page

Redraw and rearrange

Replaint – part of the screen is redrawn without affecting the overall layout, such as the background color of a CSS that changes, but the geometry and position of elements remain the same.

Rearranging reflow: means that the geometry of the component has changed and we need to revalidate and evaluate the render tree. Part or all of the render tree has changed

It is mentioned in the official rendering performance documentation:

Regardless of JavaScript, CSS, or web animation, these phases of the browser are often changed when visual changes are implemented

  1. JS/CSS > Styles > Layout > Draw > Composition

If you modify an element’s “layout” attribute, that is, change its geometry (such as width, height, left or top position, etc.), the browser will have to examine all the other elements and then “automatically rearrange” the page. Any affected parts need to be redrawn, and the final drawn elements need to be composited.

  1. JS/CSS > Styles > Draw > Composition

If you change the “Paint Only” properties (such as background images, text colors, or shadows) that do not affect the properties of the page layout, the browser skips the layout but still performs the drawing.

  1. JS/CSS > Styles > Composition

If you change a property that does neither layout nor draw, the browser jumps to just perform composition.

This final version has the least overhead and is best suited for high-stress points in the application life cycle, such as animation or scrolling.

Practical significance

  1. Instead of using style frequently, modify class (reduce the style step time)

  2. Animating with the transform and opacity property changes allows the synthesizer to handle the animating independently, bypassing Layout and Paint. Currently, only two properties are qualified. One prerequisite is to add a synthesizer layer to the animating element Will-change: transform

    .moving-element {
transform:... will-change: transform; } // Older browsers or browsers that do not support will-change.moving-element {
transform: translateZ(0);
}
Copy the code

    The reason why it can be optimized is because the synthesizer will call GPU acceleration see the official documentation

  3. For resize, scroll, etc., perform anti-shake/throttling.

reference

What happens when you enter the URL to the page?

A copy of interview answers