Every time you encounter a programming problem you don’t understand, do you habitually open www.baidu.com and www.google.com to solve the problem you encounter? Do you know what happens when you type the URL in your hand and press enter? Follow me to find out ~~~~
When we type the url into the browser and press enter, what services are called, what steps are taken, and it all starts here.
1. URL parsing
A URL includes protocol, network address, and resource path
Protocol: The most common ones such as HTTP (Hypertext Transfer Protocol) AND FTP (file Transfer Protocol)
Network address: The value can be a domain name or IP address, including the port number. If the port number does not exist, the default value is 80
If it is an invalid address, it will be forwarded to the default search engine. For example, if you are using Chrome, you can enter what you want to search for in the URL field and the search engine will search for it based on the keyword.
2. DNS domain name resolution
For example, baidu.com is the domain name
1. Search for cache information
—— The browser caches DNS for a period of time
System cache —– If it is not found in the browser, the browser makes a system call to retrieve the record from the system cache
The router cache —– then sends the request to the router, which typically has its own DNS cache
2. Search for the DNS server
If no, send a request to the LOCAL DNS server. Each local DNS server maintains a cache of the recently used domain names and their IP addresses. If not, a recursive query is issued (the local server requests a server one level higher than it, and so recurses to the root DNS server, which is sure to find the IP address of the server) through which the unique path from the client to the server can be found.
3. The browser host establishes a TCP connection with the server based on the IP address
The browser sends a SYN request to the server. After the server and the browser establish three times of packet interaction, the server can send data.
After the correct IP address is found, the connection is established. The process of establishing a connection usually uses THE TCP protocol, and the connection is established through the three-way handshake.
TCP three-way handshake
The client sends a request to establish a connection. The packet carries SYN.
If the server has an open port to accept and establish a connection, the server will return a SYN + ACK telling the client that I can accept your request.
After receiving the response from the server, the client sends an ACK to the server. Connection established.
Text understanding:
Client: “Hello, your express arrived, people at home?”
Server end: “in of, deliver line.”
Client: “Ok.”
4. Send the HTTP request
Once you have established a connection to the server, you can make requests to the server
According to the requirements of THE HTTP protocol, an HTTP packet is organized to send an HTTP request to the server. The HTTP request header has a request line and a request header with empty lines.
Check the packet header in the browser (take QQ browser as an example) :
The request line contains the request method, URI, and HTTP version. Header fields pass important information, including request header fields, generic header fields, and entity header fields. We can see the details of the sent request in the message. The purpose of each header field is not explained here
5. The server processes the request
After receiving the request, the server generates an HTTP response packet and sends it to the browser host over TCP
After requesting the service via HTTP, the server returns a response message as the browser ———-HTTP response,
In HTTP, a request gets a response, even if it’s an error message. Here we also look at the composition structure of the response message:
There is always an HTTP status code in the response result, such as 200, 301, 404, 500, etc. Using this status code, we can know whether the processing on the server side is normal, and we can know the specific error.
The status code consists of three digits and a reason phrase. According to the first digit, the status code can be divided into five categories:
6. Disconnect the TCP connection
To avoid resource consumption and wastage on both the server and client, either party can initiate a shutdown request when no request or response is delivered. Similar to the three-way handshake used to create a TCP connection, four handshakes are required to close a TCP connection.
- The client initiates an interrupt request and sends the
FINTo the server - The server receives the request, but the data may not be finished. Instead of closing the socket, it replies
ACKTell the client that it knows - The client enters the Fin_Wait state and waits for the server
FINMessage. The server sends the packet to the client after the packet is sentFIN - The client replies after receiving the message
ACKAnd close the connection
The image above can be interpreted this way:
- Client: “brother, I have no data to transfer, let’s close the connection.”
- Server: “Roger, LET me see if I have any data.”
- Server: “Brother, I have no data to transfer to you, we can close the connection.”
- Client: “Ok.”
7. Browsers parse files
The browser parses the HTML, generates the DOM tree, parses the CSS, generates the CSS rule tree, and then generates the render tree from the DOM tree and the CSS rule tree. Unlike DOM trees, render trees do not have nodes that do not need to be displayed, such as head or display none.
Note that the browser parsing process is not sequential, such as CSS parsing at the same time, can continue to load parsing HTML, but in the parsing execution of JS scripts, will stop parsing subsequent HTML, which will appear blocking problems, about JS blocking related problems, (JS blocking problems can be baidu, Or wait until I have time to update an article explaining blocking separately)
8. Browser layout rendering
Based on the render tree layout, compute CSS styles, which are geometric information such as the size and position of each node in the page. HTML has a streaming layout by default, and CSS and JS break this layout by changing the look and feel of the DOM as well as its size and position. Two important concepts come up here: Repaint and reflow.
repaint: Part of the screen is redrawn without affecting the overall layout. For example, the background color of a CSS is changed, but the geometry and position of elements remain the same.
reflow: means 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. That’s a Reflow, or Layout.
So we should try to minimize reflow and repaint, good CSS specifications will reduce such operations, portal ·CSS writing specifications and order
Finally, the browser draws each node and presents the page to the user.
So the cycle from entering the URL to presenting the page is complete.
Want to know more, come to my public account!! Public number: QHQ1256618908 ‘scan code can also yo ~
