Entering the URL of the browser address and pressing Enter can be divided into the following steps
1. Parse the URL to determine whether the URL is legal, and then the browser checks whether there is a cache for the current URL, and compares whether the cache has expired.
2. DNS resolves the IP corresponding to the URL.
3. Establish a TCP connection based on IP. (three-way handshake)
4. HTTP initiates a request.
5. The server processes the request, and the browser receives the HTTP response.
6. Render the page and build the DOM tree.
7. Close the TCP connection. (waves four times)
URL, Uniform Resource Locator, is used to locate resources on the Internet, commonly known as "URL".
The URL follows the following syntax rules: scheme://host.domain:port/path/filename
scheme - defines the type of Internet service. The common protocols are http, https, ftp, file, among which the most common type is http, and https is for encrypted network transmission.
host - defines the domain host (default host for http is www).
domain - defines the Internet domain name, such as w3school.com.cn.
port - defines the port number on the host (default port number for http is 80).
path - defines the path on the server (if omitted, the document must be located in the root directory of the website).
filename - defines the name of the document/resource.
1. Analyze the URL, find the current URLDNS cache record, and compare whether the cache is expired.
First, the URL will be parsed to analyze the transmission protocol to be used and the path of the requested resource. If the protocol or host name in the URL entered is invalid, the content entered in the address bar will be passed to the search engine. If there is no problem, the browser will check whether there are any illegal characters in the URL, and if there are illegal characters, escape the illegal characters before proceeding to the next process.
Characters like / ? : have been understood by url as special meanings, so these characters cannot appear randomly.
For example, if these special characters are required in a parameter, the special characters must be escaped first.
Escaping rules: convert the character to be transcoded into hexadecimal, and then from right to left, take 4 digits (less than 4 digits and process directly), make one digit for every 2 digits, add % in front, and encode it as %XY Format.
HSTS is the abbreviation of HTTP Strict Transport Security (HTTP Strict Transport Security). This is a method used by websites to declare that they can only be accessed using a secure connection (HTTPS). If a website declares an HSTS policy, the browser must deny all HTTP connections and prevent users from accepting insecure SSL certificates. Most major browsers currently support HSTS.
The browser will also perform some additional operations, such as security checks, access restrictions, and so on.
Browser check cache:
2. DNS domain name analysis to get the corresponding IP.
Assuming that the URL entered contains a domain name, it will definitely involve DNS resolution. Of course, if the URL was just an IP, then DNS would not be involved. The appearance of the domain name is for the convenience of memory, because the domain name is easier to remember than the IP. We assume here that the URL contains the domain name. DNS domain name resolution uses a recursive query method.
- Browser cache:
First, it will check whether there is an IP address corresponding to the domain name in its own browser cache (if the domain name has been visited before and the cache has not been cleared);
- System cache:
When there is no IP corresponding to the domain name in the browser cache, it will automatically check whether the DNS cache of the hosts file of the user's computer system has the IP corresponding to the domain name; however, this operating system-level domain name resolution procedure is also used by many hackers, by modifying your hosts file The content of the domain name resolves the specific domain name to the ip address he specified, resulting in the so-called domain name hijacking. So set the hosts file to readonly in windows7 to prevent malicious tampering.
- Router cache:
When neither the browser nor the system cache can find it, it will enter the router cache to check, and the above three steps are the DNS cache of the customer service end;
- ISP (Internet Service Provider) DNS cache:
When the IP address corresponding to the domain name cannot be found on the user customer service side, it will enter the ISP DNS cache for query. For example, if you are using the Telecom network, you will enter the DNS cache server of Telecom to search;
- root name server
When none of the above is completed, enter the root server for query. There are only 13 root domain name servers in the world, 1 main root domain name server, and the remaining 12 are auxiliary root domain name servers. After the root domain name receives the request, it will check the zone file records, and if there is no record, it will tell the local DNS server the server IP of the top-level domain name (such as .com) within its jurisdiction;
- TLD server
After receiving the request, the top-level domain name server checks the zone file records, and if there is no record, it informs the local DNS server of the IP address of the primary domain name server within its jurisdiction;
- primary nameserver
After receiving the request, the primary domain name server queries its own cache, if not, enters the next-level domain name server to search, and repeats this step until the correct record is found;
- save result to cache
The local domain name server saves the returned result to the cache for the next use, and feeds back the result to the client, and the client communicates with the web server through this IP address
Finally, return the found ip to the user and cache it locally for next use. Moreover, it is time-consuming to know the DNS resolution. Therefore, if there are too many domain names to resolve, it will slow down the loading speed of the first screen. Becomes very slow (a point to optimize the speed of the first batch), consider dns-prefetch optimization
3. Establish a TCP connection based on IP. (three-way handshake)
TCP is a reliable link-oriented protocol
. The so-called three-way handshake (Three-way Handshake) means that when establishing a TCP connection, the client and the server need to send a total of 3 packets.
The purpose of the three-way handshake is to connect to the specified port of the server, establish a TCP connection, and synchronize the serial numbers and confirmation numbers of both parties, and exchange TCP window size information. In socket programming, when the client executes connect(). A three-way handshake will be triggered.
For the first handshake, the client sends a TCP SYN=1 (synchronous connection establishment) packet, indicating the port of the server that the client intends to connect to, and randomly generates a data packet with seq number=1234567 to the server. After sending, the client enters SYN_SEND state.
The second handshake: After receiving the request, the server needs to confirm the online information, send syn=1, ack=1 (acknowledgment confirmation), ack number=(seq+1 of host A) to A, and randomly generate a packet of seq=7654321; After sending, the server enters the SYN_RCVD state
After receiving the third handshake, the client checks whether the ack number is correct, that is, the seq number+1 sent for the first time, and whether the bit code ack is 1. If it is correct, host A will send ack number=(seq of host B +1), ack=1, host B confirms the seq value and ack=1 after receiving it, then the connection is established successfully.
After the client sends, it will enter the ESTABLISHED state, and when the server receives the packet confirmation, it will also enter the ESTABLISHED state, and the TCP handshake ends.
Why can't I connect with two handshakes?
The 3-way handshake completes two important functions. It not only requires both parties to prepare for sending data, but also allows both parties to negotiate on the initial serial number, which is sent and confirmed during the handshake process.
If the three-way handshake is changed to only two handshakes, deadlock is possible. As shown in the figure below, if there is communication between the computer Client and the Server, it is assumed that the Client sends a connection request packet to the Server, and the Server receives the packet and sends a confirmation response packet. According to the agreement of the two handshakes, Server believes that the connection has been successfully established and can start sending data packets. However, in the case that the server's response packet is lost during transmission, the client will not know whether the server is ready, or what serial number the server has established, and the client even doubts whether the server has received its own connection request packet. In this case, the Client thinks that the connection has not been successfully established, and will ignore any data packets sent by the Server, and the Client only waits for the connection confirmation response packet. However, after the data packet sent by the server times out, the server repeatedly sends the same data packet. This forms a deadlock.
The other three handshakes can prevent the invalid connection request segment from being transmitted to the Server suddenly, thus causing an error. Assume that there is an abnormal situation, that is, the first connection request segment sent by the Client is not lost, but stays in some network nodes for a long time, and it is delayed until a certain time after the connection is released before reaching the Server. It turns out that this is a segment that has already expired. However, after Server receives this invalid connection request segment, it mistakenly thinks that the Client sends a new connection request, so it sends a confirmation segment to the Client, agreeing to establish a connection. Assuming that the three-way handshake is not used, then as long as the Server sends a confirmation, a new connection is established, and it has been waiting for the Client to send data, so many resources of the Server are wasted in vain.
Layered management of TCP/IP
The TCP/IP protocol suite includes many protocols, which are divided into four layers: application layer, transport layer, network layer, and data link layer.
Application layer: Contains various general application services, such as FTP (File Transfer Protocol, file transfer protocol), DNS, HTTP, etc.
Transport layer: Provides data transmission between two computers in the network, such as TCP and UDP.
Network layer: deals with data packets flowing on the network. This layer specifies the transmission route and the path through which data packets are transmitted to the other party's computer. Such as IP.
Data link layer: connects the hardware part of the network, including hardware devices such as network cards, optical fibers, etc.
4. After the connection is established, an HTTP request is initiated.
A complete HTTP request consists of three parts: the request start line, the request header, and the request body
5. The server responds to the HTTP request, and the browser gets a response.
After receiving the HTTP request sent by the browser, the server will encapsulate the received HTTP message into an HTTP Request object and process it through different web servers. The processed result will be returned as an HTTP Response object, mainly including the status There are three parts: code, response header, and response message.
The status code mainly includes the following parts
1xx: Instructions – Indicates that the request has been received and continues to be processed.
2xx: Success – Indicates that the request has been successfully received, understood, accepted.
3xx: Redirection – Further action is necessary to complete the request.
4xx: Client Error – The request has syntax errors or the request cannot be fulfilled.
5xx: Server-Side Error – The server failed to fulfill a legitimate request.
The response header is mainly composed of Cache-Control, Connection, Date, Pragma, etc.
The response body is the information returned by the server to the browser, mainly composed of HTML, css, js, and image files.
6. The browser parses the HTML code and renders the page.
Parsing and downloading js, css, pictures
1. Parsing html tags to create a DOM tree
2. Parsing css to create a CSSOM tree
3. Merging DOM and CSSOM to generate a reander tree
4. Layout the reader tree, calculating the position and size of each node
5. Rendering, presenting the page
This process may trigger a redraw or reflow of the page. Two important concepts are involved here: Reflow and Repaint.
Reflow, also known as Layout, is called reflow in Chinese, which generally means that the content, structure, position or size of the element has changed, and the style and rendering tree need to be recalculated. This process is called Reflow.
Repaint, repainting, means that the change of the element only affects some appearance of the element (for example, background color, border color, text color, etc.)
The cost of redrawing and reflowing is that the card will slow down, but the browser has its own optimization. It will maintain a queue and put all the operations that cause redrawing and reflowing into this queue. When the queue reaches a certain number or reaches a certain time, the browser will flush the queue and perform a batch process, which will make multiple redrawing reflows into one redrawing reflow
optimization:
- Change className directly
- display: none Set the element to display: none first, then operate on the element, and then set the element to display: block after the operation is completed, so that only two redraws and reflows are triggered
- Use replaceChild to directly replace the dom that needs to be changed, and only redraw the flow once
- Set elements that require multiple reflows to position:absolute/fixed to get them out of the document flow
- createDocumentFragment, create a virtual node, and add it at one time
7. The server closes the TCP connection.
TCP waved four times to close the TCP connection
The first wave (FIN=1, seq=x): Assuming that the client wants to close the connection, the client sends a FIN=1 packet, indicating that it has no data to send, but it can still accept data. After sending, the client enters the FIN_WAIT_1 state. (The first wave: initiated by the browser, sent to the server, my request message has been sent, you are ready to close)
The second wave (ACK=1, ACKnum=x+1): The server confirms the client's FIN packet and sends a confirmation packet, indicating that it has accepted the client's request to close the connection, but it is not ready to close the connection. After sending, the server enters the CLOSE_WAIT
state. After receiving the confirmation packet, the client enters the FIN_WAIT_2 state and waits for the server to close the connection. (Second waving: initiated by the server, tell the browser that I have finished accepting the request message, and I am going to close it, so you should too)
The third wave (FIN=1, seq=y): When the server is ready to close the connection, it sends a connection end request to the client, and FIN is set to 1. After sending, the server enters the LAST_ACK state, waiting for the last ACK from the client. (The third wave: initiated by the server, telling the browser that I have finished sending the response message, you are ready to close)
The fourth wave (ACK=1, ACKnum=y+1): The client receives a close request from the server, sends a confirmation packet, and enters the TIME_WAIT state, waiting for possible ACK packets that require retransmission. After receiving the confirmation packet, the server closes the connection and enters the CLOSED state. After waiting for a certain fixed time (two maximum segment life cycles, 2MSL, 2 Maximum Segment Lifetime), the client does not receive the ACK from the server, and thinks that the server has closed the connection normally, so it closes the connection itself and enters the CLOSED state. (The fourth wave: initiated by the browser, tell the server that I have finished receiving the response message, and I am going to close it, so you should too)
Why is there a three-way handshake but four waved hands when connecting?
When establishing a connection: After the server side receives the SYN connection request message from the client side, it can directly send a SYN+ACK message. Among them, the ACK message is used for response, and the SYN message is used for synchronization.
When closing the connection: When the server receives the FIN message, when TCP is implemented in the system kernel, it will automatically respond with ACK; sending FIN again is the application program manually calling close() to close the connection. Before the program closes the connection, it may need to perform pre-operations such as releasing resources, so the merge cannot be performed twice, and it needs to wave four times when the connection is disconnected.