This is a very common and classic problem that a qualified Web programmer must understand!

Break down

Parsing the url

After the browser captures the URL in the address bar, it first parses the URL. Url parsing is shown below:

A complete URL containing the above parts, the protocol part is usually HTTP or HTTPS. The domain name part can be a domain name, such as Baidu.com, or an IP address. The domain name will also be resolved to an IP address. This IP address is used to identify the location of the server on the Internet, followed by the port number, which identifies the specific program running on the server. The path part represents the specific identification of resources in the program, and the query parameter is mainly used to send data.

The DNS

Generally, you need to purchase domain names from carriers because IP addresses are not easy to remember. Domain names are bound to IP addresses, so here you need to do DNS resolution, the so-called DNS resolution is actually, according to the domain name to find its bound IP address.

The order of search is shown below:

DNS lookup procedure

  1. The browser first checks to see if there is a cache, because if the domain name has been visited once, the result will be cached in the browser.
  2. The operating system also has its own DNS cache, but before doing so, it checks to see if the domain name exists in the local Hosts file.
  3. The router will also have its own cache.
  4. The IPS DNS cache is the preferred DNS server configured on the client computer.
  5. In all cases where no cache is found, the Internet is connected and the request is forwarded to the root domain of the Internet.

The following figure shows a DNS query process

A TCP connection

After determining the IP address and port number of the target server, the TCP connection is established with the remote server. Three times I described the process as follows:

  • Sender: Sends a message, waits…
  • Receiver: Receives the message and replies to the sender. After receiving the message, the sender can understand that his message can be sent from the perspective of the sender. However, the recipient cannot be sure that his or her message can be sent properly.
  • Sender: After receiving the reply from the sender, the sender sends a message to the receiver. At this time, the receiver can know that its message can be sent normally.

It is drawn as follows:

The advantage of the TCP three-way handshake is that the sender can confirm that the receiver is still online

Sending an HTTP request

HTTP protocol is based on TCP/IP protocol, TCP to ensure that the connection is smooth, HTTP can be normal requests and responses. First, HTTP requests are stateless and can only be initiated by the browser and responded by the server.

The browser sends a request packet carrying the following information

  • Request path
  • Query parameters
  • Request method
  • Request header
  • Request body

The server receives the request

The server will listen to the HTTP request sent by the browser. When the browser request is sent, the server will accept the request, parse out the corresponding information, and select the corresponding logic for processing (such as: find the corresponding static page, save the file, operate the database, forward….). And returns the processing result to the browser.

A simple example of a Node server is as follows:

const http = require('http'); // Introduce the HTTP module

const server = http.createServer((req, res) = > {
	// req stores the information carried by the browser
    // Parse req information, such as path request method request header request body, etc
    // Write server-side logic processing code
    / / response
    res.end();
})

server.listen(3000.() = > console.log(': : 3000'));

// Assume the program is patrolling the server at IP address 140.143.201.230
// Suppose 140.143.201.230 is bound to the domain name www.aabbcc.com
/ / then request address For http://www.aabbcc.com:3000/home

/ / when a browser requests after http://www.aabbcc.com:3000/home, the IP address of the DNS to the server for 140.143.201.230, so the above HTTP. CreateServer receiving callback function is executed.

Copy the code

Server response

After the server executes the logic, it needs to give the browser a response (either to get data from the server or to do something on the server).

The response generally consists of the following parts

  • Status code
  • State the text
  • Response headers
  • Response body

The server’s response must be accompanied by a browser-side reception, and when the browser is fully received, TCP waves four times and disconnects.

TCP connection Down

TCP connection disconnection requires “four waves”, which requires active release by one party and passive release by the other party. The general process is as follows:

  1. The browser sends a message telling the server that it now needs to disconnect (first wave)
  2. When the server receives a request to disconnect, it returns a message to the browser telling it that I am preparing to release (second wave)
  3. At this point, the browser receives the message and is waiting for the server release to complete, while the server is preparing the release process
  4. When the server is free, notify the browser that I am free. (Third wave)
  5. When the browser receives the message that the release is complete, it sends a message to the server telling the server that IT knows that the release is complete. After receiving the message, the server can confirm that the release has been notified (fourth wave).

Browser parsing resources

When the browser receives a resource from the server, it parses the resource.

  1. First, look at the Response Header and do different things according to the instructions in the Response Header, such as redirect, store cookies, unzip gzip, cache resources, and so on.
  2. Next get the MIME Type (look at the content-Type value of the response header) and parse it differently depending on the resource Type

To render the page

Generally speaking, after entering the address from the address bar, the vast majority of cases are responding to the HTML file, so let’s say that the page is how to render the HTML page, HTML page generally also embedded CSS, JS, images and other resources. Therefore, if these resources are parsed, a request is made to the target server again, and all the steps start with the url address.

The entire page is loaded as shown below:

Loading of HTML pages

The first thing to know is that browser parsing is done line by line from top to bottom.

  1. Decode: The data that is sent back is actually binary bytes that the browser needs to convert into a string, or HTML code, according to the encoding specified by the file (such as UTF-8)
  2. Pre-parsing: What pre-parsing does is load resources ahead of time to reduce processing time. It identifies attributes that will request resources, such as the SRC attribute of the IMG tag, and adds the request to the request queue.
  3. Symbolization: Symbolization is the process of lexical analysis that parses input into symbols. HTML symbols include start tags, end tags, attribute names, and attribute values. It uses a state machine to identify symbol states, such as <, > state will change.
  4. Build the tree: In the previous step of symbolization, the parser takes these tokens and then creates and inserts them into DOM objects in the appropriate way.

Browser fault tolerance: You never see a “syntax invalid” error in a browser, because the browser corrects the syntax and moves on.

CSS analytical

Once the browser downloads the CSS, the CSS parser processes any CSS it encounters, parses all the CSS according to the syntax specification and tokenizes it, and then we get a table of rules. The CSS rules of a node are matched from right to left. For example, div p {font size :14px} looks for all p tags and determines whether the parent element is div.

So when we write CSS, try to use ID and class, don’t over stack.

JavaScript compiler execution

The general process is as follows:

There are three main stages

  1. Lexical analysis: After loading the JS script, it will first enter the syntax analysis stage. It will first analyze whether the syntax of the code block is correct. If the syntax is incorrect, it will throw “syntax error” and stop execution.
  2. Precompile: JS runs in three environments: global, function, and eval. Each time entering a different running environment, a corresponding execution context will be created. According to different context environment, a function call stack is formed. The bottom of the stack is always the global execution context, and the top of the stack is always the current execution context.
  3. Execution: ALTHOUGH JS is a single thread, but the actual participation in the work of the thread a total of four: JS engine thread (main), event trigger thread, timer trigger thread, HTTP asynchronous request thread

conclusion

Enter the address from the address bar of the browser and press Enter, which can be regarded as the initiation of a request. Then the following steps must be followed:

  1. Resolving URL Addresses
  2. The DNS
  3. TCP link
  4. Sending an HTTP request
  5. The server receives the request
  6. Server response
  7. TCP connection Down
  8. Browser parsing resources

So we need to understand that the browser can send a request in more ways than just the address bar. For example, a tag, IMG, link, script, form, Ajax, FETCH, etc., all of these methods can send HTTP requests, so they all go through the above process, and finally get the resource, but the type of the resource is different, so the browser process is different.