深度解析浏览器中输入 URL 后发生了什么

先上张简单分析的图：

思维导图

1. DNS 域名解析

• 第一步，浏览器会检查缓存中有没有这个域名对应的解析过的 IP 地址，如果有，解析结束。
  浏览器中的缓存有时间空间限制。
• 查找操作系统的缓存中是否有这个域名对应的 DNS 解析结果。
  在 Windows 系统中通过 C:\Windows\System32\drivers\etc\hosts 文件可以将域名解析到任何能够访问的 IP 地址，浏览器会首先使用这个地址。Linux 中这个配置文件是 /etc/named.conf。
  缓存时间同样受域名失效时间与缓存空间大小限制。
• 如果以上还没解析结束，操作系统会把域名发送到 LDNS ( Local DNS Server )，即本地区的域名服务器。
  到这里已经可以解决 80% 的请求了。
• 如果 LDNS 还没有，直接到 Root Server 域名服务器请求解析。
• 根域名服务器返回给本地域名服务器一个所查询的主域名服务器( gTDL Server )地址。gTDL 是国际顶级域名服务器，如 .com、.cn 等。
• 本地域名服务器再向主域名服务器发送请求。
• 接受请求的主域名服务器查找并返回此域名对应的 Name Server 域名服务器地址，它是注册的域名服务器，如域名提供商的服务器。
• Name Server 域名服务器查询存储的域名与 IP 的映射关系表，得到 IP 与 TTL值（TTL 值是控制返回时间的）。

2.建立TCP连接

TCP三次握手

1. 第一次握手：建立连接。客户端发送 SYN 包到服务器，Sequence Number 为 x，进入 SYN_SENT 状态，等待服务器确认。
2. 第二次握手：服务器收到 SYN 包，对这个报文进行确认，设置 Acknowledgment Number 为 Sequence Number + 1；同时自己也要发送 SYN 包，Sequence Number 为 y；服务器将这些所有信息放入 SYN + ACK 包中发送给客户发，服务器进入 SYN_RCVD 状态。
3. 第三次握手：客户端收到 SYN + ACK 包。将 Acknowledgment Number 设为 y + 1，即服务器发来的 Sequence Number + 1，并向服务器发送 ACK 包，发送完成后客户端和服务器都进入 ESTABLISHED 状态。

TCP三次握手与四次挥手

3. 发起 HTTP 请求

请求方法

下面只列举了 HTTP/1.1 支持的方法。

方法	说明	备注
GET	获取资源
POST	传输实体主体
DELETE	删除文件	不带验证机制，任何人都可以删除
PUT	传输文件	不带验证机制，任何人都可以上传，存在安全问题
TRACE	追踪路径	容易引发 XSL 跨站攻击
HEAD	获得报文首部
OPTIONS	询问支持方法	查询针对请求 URI 指定的资源支持的方法，响应如 Allow: GET,POST,HEAD
CONNECT	要求用隧道协议连接代理	主要使用 SLL 和 TLS 协议把通信内容加密后经网络隧道传输

请求报文

请求报文

4. 接收响应结果

状态码

状态码的类别

	类别	原因
1XX	Informational	请求的信息正在处理
2XX	Success	请求正常处理完毕
3XX	Redirection	需要进行附加操作以完成请求
4XX	Client Error	服务器无法处理请求
5XX	Server Error	服务器处理请求出错

具体状态

• 2XX
  • 200 OK
    表示从客户端发来的请求在服务器端被正常处理了
  • 204 No Content
    服务器接收的请求已成功处理，但在返回的响应报文中不含实体的主体部分
  • 206 Partial Content
    客户端进行了范围请求，而服务器成功执行了这部分的请求。响应报文中包含 Content-Range 指定范围请求的实体内容。

• 3XX

  • 301 Move Permanently
    永久重定向。表示该资源已经分配了新的 URI，以后应使用资源现在的 URI。
  • 302 Found
    临时重定向。表示该资源已经分配了新的 URI，希望用户本次能使用新的 URI 访问。
    与 301 不同的是，302 已经移动的资源对应的 URI 将来还有可能改变。
  • 303 See Other
    由于请求对应的资源存在另一个 URI，应使用 GET 定向获取请求的资源。
  • 304 Not Modified
    它与重定向没有关系。
    服务器资源未改变，可直接使用客户端未过期的缓存。304返回时，不包含任何主体部分。

• 4XX

  • 400 Bad Request
    请求报文中存在语法错误。

  • 401 Unauthorized
    需要有通过 HTTP 认证的认证信息

  • 403 Forbidden
    对请求资源的访问被服务器拒绝了

  • 404 Not Found
    无法找到请求的资源

• 5XX

  • 500 Internal Server Error
    服务器端在执行请求时发生了错误
  • 503 Service Unavailable
    服务器暂时处于超负载状态或正在维护

响应报文

响应报文

5. 浏览器解析 HTML

渲染引擎开始解析 HTML / SVG / XHTML，并将标签转化为内容树中的 DOM 节点，产生 DOM Tree。接着，它解析 CSS 文件以及标签中的 style 样式信息，形成 CSSOM 树。DOM 树与 CSSOM 树共同构成 Render Tree，即渲染树。

6. 浏览器布局渲染

渲染的流程：

• 计算 CSS 样式
• 构建 Render Tree
• Layout 布局
• 绘制

Reflow / Layout：发生在元素尺寸改变时，或者将 display 由 block 变为 none 时。

Repaint：屏幕的一部分要重绘时，如某个元素背景色的变化。

注：Reflow 的成本比 Repaint 的成本大很多。

值得注意的是，这个 5、6 是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

参考资料

• 浏览器中输入url后发生了什么
• TCP3次握手连接协议和4次握手断开连接协议
• How browsers work