浏览器输入 URL 到加载页面的过程
1. 输入 URL
用户在浏览器中输入 URL（如 https://www.bilibili.com），浏览器会解析输入的内容，并判断其是：
- 搜索内容：将内容提交给默认搜索引擎。
- 有效 URL：进入下一步处理流程，如果缺少协议（如
http://或https://），浏览器会自动补全。
💡 提示：浏览器会根据用户的历史记录和设置，智能推荐 URL 或搜索结果。
2. 查找缓存
浏览器在向服务器发起请求前，会尝试从缓存中找到对应的页面资源，以提高加载速度并减少不必要的网络请求。缓存的查找顺序如下：
浏览器缓存： 浏览器会首先查看自身的 DNS 缓存，尝试找到对应的记录。
操作系统缓存： 如果浏览器缓存中没有找到，操作系统会尝试从其 DNS 缓存中查找。
路由器缓存： 如果操作系统缓存中也没有记录，请求会被发送到路由器，查看其 DNS 缓存。
ISP 缓存： 如果前面都未找到记录，请求会被发送到 ISP（互联网服务提供商）的 DNS 缓存。
⚠️ 注意：如果所有缓存查找均失败，则进入下一步：DNS 域名解析。
3. DNS 域名解析
浏览器需要将输入的域名（如 www.bilibili.com）解析为对应的 IP 地址。DNS 域名解析的过程如下：
浏览器发起 DNS 请求： 浏览器向 DNS 服务器发起请求，通常是基于 UDP 协议完成。
递归查询和迭代查询： DNS 服务器可能会递归查询或迭代查询，逐级解析域名，最终获取到对应的 IP 地址。
返回 IP 地址： DNS 服务器将解析得到的 IP 地址返回给浏览器，供后续通信使用。
🌐 扩展：递归查询是由 DNS 服务器全程负责完成，迭代查询则是由客户端逐步向 DNS 服务器请求。
4. 建立 TCP 连接
浏览器通过解析得到的 IP 地址，向目标服务器的默认端口（HTTP 为 80，HTTPS 为 443）发起 TCP 连接。TCP 连接的建立需要经过以下三次握手：
客户端发送 SYN：
浏览器向服务器发送一个 SYN（同步）包，请求建立连接。服务器返回 SYN-ACK：
服务器响应客户端的请求，返回一个 SYN-ACK（同步-确认）包。客户端发送 ACK：
浏览器向服务器发送一个 ACK（确认）包，连接建立完成。
🔒 HTTPS 特殊处理：如果是 HTTPS，还需要进行 SSL/TLS 握手，以确保通信加密。
5. 发起 HTTP/HTTPS 请求
TCP 连接建立后，浏览器会通过 HTTP 或 HTTPS 协议向服务器发送请求报文。请求报文的结构包括：
- 请求方法（如
GET、POST等）。 - 请求路径（如
/index.html）。 - 请求头（如
User-Agent、Accept）。 - 请求体（若有，如表单数据）。
⚙️ 优化实践：使用 HTTP/2 或 HTTP/3 可以显著提升请求的并发和性能。
6. 服务器响应请求并返回结果
服务器接收到请求后，会根据请求内容做出响应，返回 HTTP 响应报文。响应报文包含：
- 状态码：如
200 OK（成功）、404 Not Found（未找到）、500 Internal Server Error（服务器错误）。 - 响应头：如
Content-Type（内容类型）、Cache-Control（缓存控制策略）。 - 响应体：如 HTML 文件、JSON 数据或其他资源。
7. 关闭 TCP 连接
浏览器与服务器之间的数据传输完成后，将通过 TCP 四次挥手关闭连接：
- 客户端发送 FIN（结束）包，表示不再发送数据。
- 服务器返回 ACK（确认）包，表示收到请求。
- 服务器发送 FIN 包，表示不再发送数据。
- 客户端返回 ACK 包，连接关闭。
🛠 优化机制：现代协议（如 HTTP/2 和 HTTP/3）支持连接复用，减少握手和挥手的开销。
8. 浏览器渲染页面
浏览器接收到 HTML 文件后，会将内容解析并渲染成用户可以看到的界面。渲染过程如下：
构建 DOM 树 浏览器解析 HTML 文件，生成 DOM 树（Document Object Model）。DOM 是由 HTML 元素及其属性节点组成的树结构。
构建 CSSOM 树 浏览器解析 CSS 文件或内联样式，生成 CSSOM（CSS Object Model）树。
构建渲染树 浏览器将 DOM 树与 CSSOM 树结合，生成渲染树（Render Tree）。渲染树包含页面中需要显示的元素及其样式信息。
布局（Layout） 浏览器根据渲染树计算每个元素在屏幕中的位置和大小。这个过程也被称为“回流”。
绘制（Painting） 浏览器遍历渲染树，将每个节点绘制到屏幕上。
🎨 性能优化：减少 DOM 节点和重绘/回流的次数，可以显著提升页面渲染速度。
9. 其他优化机制
缓存机制 浏览器会根据 HTTP 响应头中的缓存策略（如
Cache-Control、ETag）决定是否缓存资源，以减少重复请求。预加载与预解析 浏览器可能在页面加载过程中预加载资源（如图片、脚本），或对 HTML 文件进行预解析，以提升加载速度。
总结
从用户输入 URL 到页面加载完成，浏览器经历了以下主要步骤：
- 输入 URL
- 查找缓存
- DNS 域名解析
- 建立 TCP 连接
- 发起 HTTP/HTTPS 请求
- 服务器返回响应
- 关闭 TCP 连接
- 浏览器渲染页面
🚀 小贴士：通过启用 HTTP/2、压缩资源、优化缓存策略等方式，可以显著提升页面加载性能！