What happens when I enter the url in the address bar of the browser and press Enter?

你越是认真生活，你的生活就会越美好——Frank Lloyd Wright
"The Fruit of Life" Classic Quotations

Detailed

Parse url

浏览器url地址After capturing through the address bar , first 对url地址进行解析. The resolution of url is shown in the figure below:

A complete url, including the above parts, is
协议部分generally http or https.
域名部分It can be a domain name such as: baidu.com or an ip address, and the domain name will also be resolved to an ip address in the end. The role of the ip address is to determine the location of the server on the Internet,
followed by the 端口号port number to determine the specific program running in the server. The path part represents the specific identification of the resource in the program, and the
查询参数main function is to send data.

URL composition and hash attributes

DNS resolution

Generally, domain names need to be purchased from operators, because IP addresses are not easy to remember, and domain names are easier to remember. Ip address and domain name will be binding, so, here you need to do DNS解析, in fact, the so-called DNS resolution, 根据域名找到其绑定的 ip地址.

The search sequence is as follows:

DNS search process resolution:

• 浏览器It will first check whether it exists 缓存, because if the domain name is visited once, the result will be cached in the browser.
• The operating system will also have its own DNS缓存, but before that, it will check whether the domain name exists in 本地的Hosts文件it.
• 路由器China will have its own 缓存.
• IPS DNS缓存It is set on the client computer 首选DNS服务器.
• If the cache is not found in all the previous cases, it will connect to the Internet and forward the request to it 互联网的根域.

The figure below showsDNS的一个查询过程

TCP connection

After determining the target 服务器的ip地址和端口号, start to establish with the remote server TCP链接. 三次握手The process is as follows:

• 客户端: Send a message, wait...
• 服务端: Receive the message and reply to the client. At this time, after the client receives the message, it can be understood from the perspective of the client that its message can be sent. But the server is still not sure whether its message can be sent normally.
• 客户端: After receiving the reply from the server, send a message to the server. From the perspective of the server, you can understand that your message can be sent normally.

The picture is drawn as follows:

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

Send http request

http协议It is built on tcp/ip协议top of it, tcp guarantees a smooth connection, and http can request and respond normally. First, there is one http request 无状态的请求, and it can only be initiated by the browser, and the server responds.

The request message sent by the browser will carry the following information

• Request path
• Query parameter
• 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 (for example: find the corresponding static page , Save the file, operate the database, forward...), and respond to the browser with the processed result.

A simple example of node server is as follows:

const http = require('http'); // 引入http模块

const server = http.createServer((req, res) => {
    
    
	// req保存了浏览器携带的信息
    // 解析出req的相关信息，比如 路径 请求方法 请求头 请求体等
    // 编写服务端逻辑处理代码
    // 响应
    res.end();
})

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

// 假设该程序巡行在 ip地址为 140.143.201.230的服务器上
// 假设 140.143.201.230 绑定的域名是 www.aabbcc.com
// 那么请求地址 可以为   http://www.aabbcc.com:3000/home

// 当浏览器请求 http://www.aabbcc.com:3000/home之后，会DNS解析到服务器的ip地址为140.143.201.230，那么上述http.createServer接收的回调函数就会执行。

Server response

After the server executes the logic, it needs to respond to the browser (whether it is to get data from the server or what operation is done on the server, it needs to give the browser a response)

The response generally contains the following parts

• status code
• Status text
• Response header
• Response body

When the server responds, it will definitely be received by the browser side. After the browser side has completely received it, it TCPwill proceed 4次挥手and the connection will be disconnected.

TCP connection is down

TCP连接The disconnection needs to go through "四次挥手", so one party needs to actively release the other party's passive release. The general process is as follows:

1. The browser sends a message to notify the server that it needs to disconnect now (first wave)
2. After the server receives the request to disconnect, it returns a message to the browser, telling the browser that I am preparing to release (the second wave of hands)
3. At this time, the browser is waiting for the server release to complete after receiving the message, and the server is preparing to release the process
4. When the server release is complete, notify the browser that I have released it. (Waving for the third time)
5. After the browser receives the server release complete message, it sends a message to the server to tell the server that I already know that your release is complete. After the server receives the message, it can confirm that the release complete message has been notified (fourth wave)
   

Browser parsing resources

When the browser receives the resource from the server, it will parse the resource.

1. First, check the Response Header, and do different things according to the instructions in the response header, such as redirecting, storing cookies, decompressing gzip, caching resources, and so on.
2. Next, get the MIME type (check the value of Content-Type in the response header), and use different parsing methods according to different resource types

Render the page

Generally speaking, after entering the address from the address bar, in most cases the response is an html file, so let's talk about how the page renders the html page. The html page generally also embeds resources such as css, js, and pictures. Therefore, if these resources are parsed, a request will be made to the target server again, and then it will go through the various steps starting from parsing the URL address.

The loading of the entire page is shown in the figure below:

html page loading

The first thing to know is that the browser parses it line by line from top to bottom.

1. Decoding: What is transmitted back is actually some binary byte data, and the browser needs to convert it into a string according to the specified encoding of the file (such as UTF-8), which is HTML code
2. Pre-analysis: What pre-analysis does is to load resources in advance to reduce processing time. It will identify some attributes that will request resources, such as the src attribute of the img tag, and add this request to the request queue.
3. Symbolization: Symbolization is the process of lexical analysis. The input is parsed into symbols. HTML symbols include start tags, end tags, attribute names, and attribute values. It uses a state machine to identify the state of the symbol. For example, it will change when it encounters <,>.
4. Build the tree: In the previous step of symbolization, the parser obtains these tags, then creates a DOM object in an appropriate way and inserts these symbols into the DOM object.

The browser's fault tolerance mechanism: You have never seen an error like "invalid syntax" in the browser. This is because the browser corrects the wrong syntax and then continues to work.

css parsing

Once the browser downloads the CSS, the CSS parser will process any CSS it encounters, parse all the CSS according to the grammar specification and tokenize it, and then we get a rule table.
When matching the CSS rules corresponding to a node, the order is from right to left. For example, it div p { font-size :14px }will first search for all ptags and then determine whether its parent element is div.

So when we write CSS, try to use id and class as much as possible, and don't over-cascade.

javaScript compilation and execution

The general process is as follows:

mainly three stages

1. Lexical analysis: After the js script is loaded, it will first enter the grammatical analysis stage. It will first analyze whether the grammar of the code block is correct. If it is incorrect, it will throw a "grammatical error" and stop execution.
2. Pre-compilation: There are three operating environments for js: global environment, function environment, and eval. When entering a different operating environment, a corresponding execution context is created. According to different contexts, 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 single-threaded, there are four threads that actually participate in the work: JS engine thread (main), event trigger thread, timer trigger thread, HTTP asynchronous request thread

to sum up

Enter the address from the address bar of the browse location and press Enter. It can be regarded as the initiation of a request, so the following steps will inevitably go through:

1. Resolve url address
2. DNS resolution
3. TCP link
4. Send http request
5. The server receives the request
6. Server response
7. TCP connection is down
8. Browser parsing resources

Then we need to understand that browsers can send requests more than just entering the address in the address bar. For example, a tag, img, link, script, form, ajax, fetch, etc., these methods can all send http requests, then they will all go through the above process, and finally get the resource, but the type of the resource is different, then The browser handles it differently.

---

谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强

What happens when the original link
enters the url in the browser address bar and press enter?

Recommended reading
Hardcore! 30 pictures of HTTP common interview questions and
15 beautiful moving pictures to fully explain CORS (cross-domain resource sharing, same-origin strategy)
Vue source code learning (continuous update)