输入 URL 回车到页面展示中间发生了什么?
- 浏览器缓存 —— 系统缓存 —— 路由器缓存 有缓存 显示页面内容
- http 请求前的 dns ip地址
- tcp连接 三次握手
- 握手成功 浏览器发送http请求 请求数据包
- 服务器收到请求 返回数据到浏览器
- http响应
- 读取页面内容 渲染 解析html源码
- 生成 dom 树 解析 css 样式 js 交互 渲染显示页面
1. URL 解析
当你输入一个 URL 并按下回车后,浏览器首先会对 URL 进行解析。URL 通常由以下几部分组成:
- 协议(例如
https
) - 域名(例如
www.example.com
) - 路径(例如
/page1
) - 查询参数(例如
?id=123
) - 端口号(例如
:443
,如果没有显式指定端口号,http
默认使用端口 80,https
默认使用端口 443)
2. DNS 解析
浏览器需要将域名(如 www.example.com
)解析为 IP 地址,这是通过 DNS(域名系统)进行的。解析过程如下:
- 浏览器缓存: 浏览器首先会检查缓存中是否有该域名的 IP 地址记录。
- 操作系统缓存: 如果浏览器缓存中没有找到,操作系统会检查其本地缓存。
- 本地域名服务器: 如果操作系统缓存也没有找到,操作系统会将请求发送到本地的 DNS 服务器(通常由 ISP 提供),本地 DNS 服务器会查询更上一级的 DNS 服务器,直到找到该域名对应的 IP 地址。
- 返回 IP 地址: 一旦找到对应的 IP 地址,DNS 服务器会将结果返回给浏览器。
3. TCP 连接建立
在获取到目标服务器的 IP 地址后,浏览器会与该 IP 地址建立 TCP 连接。这是通过三次握手(TCP Three-way Handshake)来实现的:
- SYN: 浏览器(客户端)发送一个 SYN(同步序列编号)包给服务器,表示请求建立连接。
- SYN-ACK: 服务器收到请求后,返回一个 SYN-ACK(同步序列编号 - 确认)包,表示同意建立连接。
- ACK: 浏览器发送一个 ACK(确认)包,确认连接建立。
一旦三次握手完成,TCP 连接就建立起来了。
4. TLS/SSL 握手(仅 HTTPS)
如果你访问的是一个 HTTPS 网站,还会有一个额外的 TLS/SSL 握手过程,用于确保通信的安全性:
- 浏览器发送 ClientHello: 浏览器向服务器发送
ClientHello
消息,其中包含支持的加密算法和随机数。 - 服务器响应 ServerHello: 服务器响应
ServerHello
消息,选择加密算法,并发送数字证书给客户端。 - 验证证书: 浏览器验证服务器的数字证书是否合法。如果合法,生成一个随机的会话密钥,并使用服务器的公钥对其加密,然后发送给服务器。
- 加密通信: 服务器使用自己的私钥解密会话密钥,之后双方通过这个会话密钥加密通信内容。
5. HTTP 请求
连接建立后,浏览器会发送 HTTP 请求来获取网页资源。这包括以下内容:
- 构建请求行: 浏览器构建请求行,通常包括方法(如
GET
)、URL 路径和协议版本(如HTTP/1.1
)。 - 请求头: 包括浏览器类型、语言、Cookie 等信息。
- 发送请求: 浏览器通过 TCP 连接将请求发送给服务器。
6. 服务器处理请求
服务器接收到 HTTP 请求后,会根据请求路径和方法(如 GET
或 POST
)处理请求,通常包括以下步骤:
- 解析请求: 服务器解析请求行和请求头,了解客户端的需求。
- 资源查找: 服务器根据 URL 路径查找对应的资源(如 HTML 文件、图片、视频等)。
- 执行动态代码: 如果是动态内容(如通过 PHP、Node.js 生成的页面),服务器会执行相应的脚本,生成响应内容。
- 生成响应: 服务器生成 HTTP 响应,包括状态码(如
200 OK
、404 Not Found
)、响应头和响应体(即网页内容)。
7. 浏览器接收响应并渲染
浏览器接收到服务器的响应后,会进行以下操作:
- 解析响应: 浏览器解析 HTTP 响应,提取状态码、响应头和响应体。
- 根据状态码进行处理
- 200: 请求成功,继续处理响应体。
- 301/302: 重定向,根据
Location
头中的 URL 重新发起请求。 - 404: 资源未找到,显示错误页面。
- 500: 服务器内部错误,显示错误页面。
- 解析 HTML: 如果响应的是 HTML 内容,浏览器会解析 HTML,并构建 DOM 树。
- 处理 CSS: 解析 HTML 过程中遇到 CSS 文件,会下载并解析,构建 CSSOM 树。
- 执行 JavaScript: 解析 HTML 过程中遇到 JavaScript 文件,下载并执行。
- 渲染页面: 浏览器将 DOM 树和 CSSOM 树结合,生成渲染树(Render Tree),并将渲染树的内容绘制到屏幕上。
8. 加载其他资源
在解析 HTML 的过程中,浏览器还会发现其他资源(如图片、视频、字体等),并为每个资源发起单独的 HTTP 请求。加载这些资源可能会引起页面的重新渲染(reflow/repaint)。
9. 保持连接或断开连接
在 HTTP/1.1 中,默认开启了持久连接(Persistent Connection),即浏览器和服务器可以在同一个 TCP 连接上进行多次请求响应交换。这减少了开销并提高了性能。请求完成后,浏览器可能会保持连接一段时间,或者根据 Connection: close
头信息来关闭连接。
10. 缓存
浏览器会根据响应头中的缓存控制信息(如 Cache-Control
、Expires
)决定是否将资源缓存到本地。对于下次相同资源的请求,浏览器可能会直接从缓存中加载,从而提升速度。