# 输入URL到页面加载发生了什么

## 概述

1. DNS解析
2. TCP连接
3. 发送HTTP请求
4. 服务器处理请求并返回HTTP报文
5. 浏览器解析渲染
6. 结束

![](/files/-LwX9yytnmY-2hXBp8ar)

## 具体

### DNS查询

![](/files/-LwX8taQ-9bSOrmzmlsx)

网址的解析是一个从右向左的过程: com -> google.com -> [www.google.com。但是你是否发现少了点什么，根域名服务器的解析过程呢？事实上，真正的网址是www.google.com.，并不是我多打了一个.，这个.对应的就是根域名服务器，默认情况下所有的网址的最后一位都是.，既然是默认情况下，为了方便用户，通常都会省略，浏览器在请求DNS的时候会自动加上，所有网址真正的解析过程为](https://mm.ricky.moe/network/liu-lan-qi/http:/www.google.com。但是你是否发现少了点什么，根域名服务器的解析过程呢？事实上，真正的网址是www.google.com.，并不是我多打了一个.，这个.对应的就是根域名服务器，默认情况下所有的网址的最后一位都是.，既然是默认情况下，为了方便用户，通常都会省略，浏览器在请求DNS的时候会自动加上，所有网址真正的解析过程为): . -> .com -> google.com. -> [www.google.com.。](http://www.google.com.。)

#### DNS缓存

DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 

* 浏览器缓存
* 系统缓存
* 路由器缓存
* IPS服务器缓存
* 根域名服务器缓存
* 顶级域名服务器缓存
* 主域名服务器缓存

#### DNS负载均衡

DNS可以返回一个合适的机器的IP给用户，例如可以根据每台机器的负载量，该机器离用户地理位置的距离等等，这种过程就是DNS负载均衡，又叫做DNS重定向。大家耳熟能详的CDN(Content Delivery Network)就是利用DNS的重定向技术，DNS服务器会返回一个跟用户最接近的点的IP地址给用户，CDN节点的服务器负责响应用户的请求。

### TCP连接

拿到了要请求的资源服务器IP后，浏览器通过操作OS的socket与服务器进行TCP连接（一般来说操作系统已经封装好了TCP/IP等协议，提供套接字给应用去使用。

* [x] 总结TCP三次握手

### HTTP请求与相应

在应用层，浏览器会分析这个url，并设置好请求报文发出。请求报文中包括请求行、请求头、空行、请求主体。https默认请求端口443， http默认80。

* **请求行**：请求行中包括请求的方法，路径和协议版本。
* **请求头**：请求头中包含了请求的一些附加的信息，一般是以键值的形式成对存在，比如设置请求文件的类型accept-type，以及服务器对缓存的设置。
* **空行**：协议中规定请求头和请求主体间必须用一个空行隔开
* **请求主体**：对于post请求，所需要的参数都不会放在url中，这时候就需要一个载体了，这个载体就是请求主题。

服务端收到请求之后，会根据url匹配到的路径做相应的处理，最后返回浏览器需要的页面资源。浏览器会收到一个响应报文，而所需要的资源就就在报文主体上。与请求报文相同，响应报文也有与之对应的起始行、首部、空行、报文主体，不同的地方在于包含的东西不一样。

* **响应行**：响应报文的起始行同样包含了协议版本，与请求的起始行不同的是其包含的还有状态码和状态码的原因短语。
* **响应头**：对应请求报文中的请求头，格式一致，但是各自有不同的首部。也有一起用的通用首部。
* **空行**
* **报文主体**：请求所需要的资源。

其中请求头与响应头有

* **Last-Modify(响应头) + If-Modified-Since（请求头）**
* **ETag（响应头） + If-None-Match（请求头）**
* **Cache-Control/Expires(响应头)**

### **页面渲染**

见[页面渲染](/network/liu-lan-qi.md)

### 连接关闭

现在的页面为了优化请求的耗时，默认都会开启持久连接（keep-alive），那么一个TCP连接确切关闭的时机，是这个tab标签页关闭的时候。这个关闭的过程就是著名的四次挥手。关闭是一个全双工的过程，发包的顺序的不一定的。一般来说是客户端主动发起的关闭

## 更详细的

1. 浏览器的地址栏输入URL并按下回车。
2. 浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
3. DNS解析URL对应的IP。
4. 根据IP建立TCP连接（三次握手）。
5. HTTP发起请求。
6. 服务器处理请求，浏览器接收HTTP响应。
7. 渲染页面，构建DOM树。
8. 关闭TCP连接（四次挥手）。

![](/files/-Lwv1pxiL0PUPcFy-rr-)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mm.ricky.moe/network/liu-lan-qi/shu-ru-url-dao-ye-mian-jia-zai-fa-sheng-le-shen-me.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.