浏览器输入URL后发生了什么

当在浏览器中输入一个URL（如 https://www.example.com）并按下回车后，浏览器会执行一系列复杂的过程，将用户请求的资源加载并呈现在屏幕上。以下是详细步骤，使用Markdown格式，结合上下文确保清晰且技术准确。

1. 解析URL

  • URL结构：URL（Uniform Resource Locator）由协议（如 https）、域名（如 www.example.com）、端口（默认 HTTPS 为 443）、路径（如 /path）、查询参数（如 ?key=value）等组成。
  • 浏览器行为：
    • 解析输入的URL，检查合法性。
    • 若无协议前缀（如输入 example.com），浏览器可能自动补全为 https://example.com 或尝试搜索。
    • 清理URL（如去除多余空格，规范化编码）。
  • 示例：输入 example.com → 解析为 https://example.com/。

2. 检查缓存

  • 浏览器缓存：
    • 浏览器检查本地缓存（内存缓存、磁盘缓存）是否有请求资源的有效副本。
    • 缓存策略（如 Cache-Control、ETag、Last-Modified）决定是否使用缓存。
    • 若缓存有效，直接加载缓存资源，跳过后续网络请求。
  • 示例：若 https://www.example.com/index.html 的缓存未过期，浏览器直接渲染缓存内容。

3. DNS解析

  • 目的：将域名（如 www.example.com）转换为服务器的IP地址。
  • 过程：
    1. 检查本地缓存：
      • 浏览器检查本地DNS缓存（浏览器、操作系统）。
      • 若命中，直接获取IP。
    2. 查询本地DNS服务器：
      • 若无缓存，浏览器向操作系统配置的DNS服务器发送查询请求。
      • 操作系统可能查询 /etc/hosts 文件。
    3. 递归/迭代查询：
      • 本地DNS服务器通过根域名服务器（.）、顶级域名服务器（如 .com）、权威域名服务器（如 example.com）逐级解析。
      • 最终返回IP地址（如 93.184.216.34）。
  • 优化：
    • DNS预解析（<link rel="dns-prefetch">）。
    • 使用CDN可能返回就近服务器IP。
  • 示例：www.example.com 解析为 93.184.216.34。

4. 建立TCP连接

  • 协议：HTTP/HTTPS基于TCP，需先建立TCP连接。
  • 过程：
    1. 三次握手：
      • 客户端发送 SYN 包。
      • 服务器响应 SYN+ACK。
      • 客户端发送 ACK，连接建立。
      • [
        \text{Client: SYN} \rightarrow \text{Server: SYN+ACK} \rightarrow \text{Client: ACK}
        ]
    2. 拥塞控制（结合上下文）：
      • TCP使用慢启动，初始拥塞窗口（cwnd）较小。
      • 若发生拥塞，ssthresh设为当前未确认数据量的一半（如上下文所述）。
  • 端口：HTTP 默认 80，HTTPS 默认 443。

5. TLS/SSL握手（若为HTTPS）

  • 目的：为HTTPS建立加密通道。
  • 过程：
    1. 客户端Hello：发送支持的加密协议、算法、随机数。
    2. 服务器Hello：响应选定的加密算法、证书、随机数。
    3. 证书验证：客户端验证服务器证书（由CA签发）。
    4. 密钥交换：通过算法（如RSA或ECDHE）协商会话密钥。
    5. 完成握手：双方确认加密通道建立。
  • 优化：
    • TLS 1.3 减少握手往返。
    • 会话恢复（如Session ID或Session Ticket）加速后续连接。
  • 示例：https://www.example.com 触发TLS握手，确保数据加密。

6. 发送HTTP请求

  • 请求格式：
    • 浏览器构造HTTP请求（GET、POST等），包括：
      • 请求行：GET / HTTP/1.1
      • 头部：Host: www.example.com, User-Agent, Accept 等。
      • 可选的请求体（如POST数据）。
  • HTTP版本：
    • HTTP/1.1：逐个请求-响应，需等待响应完成。
    • HTTP/2：支持多路复用，多个请求并行。
    • HTTP/3：基于UDP（QUIC），进一步优化。
  • 示例：
    1
    2
    3
    4
    GET / HTTP/1.1
    Host: www.example.com
    User-Agent: Mozilla/5.0
    Accept: text/html

7. 服务器处理请求

  • 服务器行为：
    • Web服务器（如Nginx、Apache）接收请求，解析路径和参数。
    • 若为动态内容，交给后端（如Node.js、PHP）。
    • 返回响应，包括状态码（如 200 OK）、头部（如 Content-Type）、响应体（如HTML）。
  • 示例响应：
    1
    2
    3
    4
    5
    HTTP/1.1 200 OK
    Content-Type: text/html
    Content-Length: 1234

    <html>...</html>

8. 接收和解析响应

  • 接收数据：
    • 浏览器通过TCP接收响应数据。
    • 若数据量大，可能分段传输（结合上下文，可能涉及粘包问题）。
    • 应用层需解析数据包边界（如使用固定长度头部，参考上下文）。
  • 解析HTML：
    • 浏览器解析HTML，构建DOM（Document Object Model）树。
    • 解析CSS，构建CSSOM（CSS Object Model）树。
    • 合并DOM和CSSOM，生成渲染树（Render Tree）。

9. 加载子资源

  • 子资源：HTML中引用的CSS、JavaScript、图片等。
  • 过程：
    • 浏览器识别 <link>、<script>、<img> 等标签，发起新请求。
    • 重复DNS解析、TCP连接、HTTP请求等步骤。
    • 优化：
      • 并行加载（HTTP/2多路复用）。
      • 预加载（<link rel="preload">）。
      • 延迟加载非关键资源。
  • 示例：<img src="/image.jpg"> 触发新请求。

10. 渲染页面

  • 渲染过程：
    1. 布局（Layout）：计算元素位置和大小。
    2. 绘制（Painting）：将渲染树转换为像素。
    3. 合成（Compositing）：将图层合并，显示在屏幕上。
  • JavaScript执行：
    • 执行 <script> 标签中的代码，操作DOM或CSSOM。
    • 异步脚本（async、defer）优化加载。
  • 优化：
    • 减少重排（Reflow）和重绘（Repaint）。
    • 使用GPU加速（如CSS transform）。

11. 处理交互

  • 事件监听：
    • 浏览器绑定JavaScript事件（如点击、滚动）。
    • 用户交互触发回调，动态更新页面。
  • 示例：点击 <button onclick="myFunction()"> 调用JavaScript函数。

12. 连接关闭或保持

  • HTTP/1.1：支持 Keep-Alive，连接复用，避免重复TCP握手。
  • HTTP/2及以上：多路复用，单个连接处理多个请求。
  • 关闭：若无 Keep-Alive，TCP连接通过四次挥手关闭：