What happens to the page from entering the URL to rendering

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

Writing in the front

I have brushed some interviews before, there is often a very high frequency interview questions, that is the page from the input URL to render what happened, I have seen a lot of answers, but after a period of time is easy to forget, this time to record it into an article, deepen their impression, but also convenient next time to refer to. There are a lot of knowledge points involved in this. If you can fully understand this process, it will be of great help to the investigation of problems and performance optimization in the future.

What happens to the page from entering the URL to rendering

A simple summary can be divided into the following processes:

• The DNS
• A TCP connection
• Sending an HTTP request
• The server processes the request and returns the result
• The browser parses and renders the page

The DNS

DNS, full Name is (Domain Name System, Domain Name System), because the server IP is a string of numbers, not easy to remember, so they use Domain Name instead of IP, more semantic, easy to remember. Nuggets homepage (https://juejin.cn), headlines homepage (https://toutiao.com).

What is DNS resolution? That’s how you resolve the domain name and get the corresponding IP

• First check whether the browser has DNS cache (previous access records), if yes, return IP
• If not, look for the local host file to see if there is a record of the domain name, and return the IP if there is
• If the local host file does not exist, the request is directly sent to the local DNS server.

A TCP connection

After receiving the IP address, the browser establishes a TCP connection with the server before sending an HTTP request to the server.

How do I establish a TCP connection? A: Three handshakes

The process is as follows:

• First handshake: Sent by the clientSYNPackets to the server
• Second handshake: The server returns after receiving the data packet from the clientSYN/ACKPacket to client
• Third handshake: The client sends the handshake after receiving the return from the serverACKPackets to the server

The connection is established and data transfer is started

Is two handshakes ok? No, TCP is reliable, and you need at least three handshakes to remain reliable

Let me give you an example. Suppose two unknown people A and B are communicating on the roof of two buildings. They can hear each other but cannot see each other: A: Hello, my name is Answer. (First handshake) B: Hello, MY name is CP3, nice to meet you, you are so handsome! (Second handshake) A: Thank you! (Third handshake)… And then we continue our pleasant conversation

But if it’s just two handshakes, then it’s possible: Introduced for the first time, B heard later, two handshake to establish A connection, but this time B due to the small voice, windy, lead to not receive B feedback, A down alone, but I don’t know, B is still waiting for A feedback, lead to B have been waiting for, bad ~ through this simple example, two shake hands is likely unreliable

How do I disconnect the TCP connection after establishing a connection? A: Four waves

The process is as follows:

• First wave: the client sends a wave to the serverFINIs used to close the connection while the client can still receive data.
• Second wave: the server sends one to the client after receiving this signalACKAnd then the server entersclose_wait(Off wait) state, after the client receives, enterfin_wait_2Status, waiting for the server to close the connection and still accepting data
• Third wave: If the server has no data to send to the client, the server sends one to the clientFINTo close the connection from the server to the client
• Fourth wave: The client responds with one upon receiptACK, the server closes the connection and enters immediatelyclosedThe client is waiting for twoMaximum Lifetime (MSL)After that, also close the connection and enterclosedState.

Waving succeeded, closing connection succeeded.

Have you ever wondered why the wave is four times?

This is because when the client sends the FIN for the first time, it indicates that it has no data to send but can still receive data. When the server sends an ACK a second time, it knows that the client has no data to send, but the client can still receive data. The server sends a FIN packet for the third time, indicating that no data is sent. The server shuts down only after the client sends an ACK packet for the fourth time.

So it takes four.

Sending an HTTP request

Once the TCP connection is established, you can then request data by sending an HTTP request to the server. An HTTP request consists of a request line, a request header, a blank line, and request data

The request line

Format: Method request-URL http-version CRLF

Example: GET /test.html HTTP/1.1

Up to now, there are nine request methods: GET, POST, OPTION, HEAD, PUT, DELETE, CONNECT, TRACE and PATCH

The common request methods are GET and POST

Request Header

Transfer additional information to the server. Common request headers are:Accept.Accept-Charset.Accept-Encoding.Accept-Language.Content-Type.Authorization.Cookie.User-AgentEtc.

If the Connection is keep-alive, the Connection is used to tell the client that the TCP Connection does not need to be closed after the HTTP request is completed. In this way, the next HTTP request uses the same TCP channel, saving the time for establishing a TCP Connection

A blank line

There is a blank line between the request header and the request data, indicating that the request header is above, followed by the request data, to distinguish the two.

The request data

Data transferred from the client to the server.

Status code returned by the server

Browser parsing

The server sends the data back to the browser. How does the browser parse it?

As shown in the figure:

1. HTML parses the output DOM tree through an HTML parser
2. CSS styles The CSS parser parses the output CSS rules
3. Combined with THE DOM tree and CSS rules, calculate the specific style of each node in the DOM tree, generate the rendering tree
4. The browser starts to layout and draw from the render tree, triggering reflow and repaint.
5. Build a layer tree to display the page

One more thing:

Reflow: The process when DOM changes affect the geometry of an element (its position and size)

Conditions that occur:

• Add or remove visible DOM elements
• The position of the element changes
• The size of the element changes (including margins, inner borders, border size, height, width, etc.)
• Browser window size changes (because backflow calculates element position and size based on viewport size)

Repaint: The process of repainting an element after its appearance has been changed without changing its layout

Conditions that occur:

• Changes the color, background, and other attributes of an element
• Use of opacity and opacity

Avoid backflow and repainting as much as possible, as it can be very performance draining

Backflow must occur redraw, redraw does not necessarily occur backflow

conclusion

The above is their summary of the page from the input URL to render what has happened, this problem leads to knowledge is very much, I just about the whole process, I hope to help you understand this problem ~