输入一个网址按回车发生了什么

用户4081281200381
64 阅读3分钟

一、URL 解析与协议识别

  1. 输入处理

    • 浏览器自动补全协议（如输入 baidu.com 会补全为 https://baidu.com）。
    • 解析 URL 结构：https://www.example.com/path?query=1#hash 分为：
      • 协议（https:）、域名（www.example.com）、路径（/path）、查询参数（query=1）、锚点（#hash）。

  2. 安全检查

    • 浏览器内置的安全机制（如XSS过滤、恶意网址检测）会初步验证URL合法性。

二、DNS 解析：域名转 IP 的过程

  1. 缓存查询（耗时 <1ms）

    • 优先检查浏览器 DNS 缓存（chrome://net-internals/#dns 可查看）。
    • 若未命中，查询操作系统缓存（Windows 下用 ipconfig /displaydns 查看）。

  2. 递归查询（耗时 20-120ms）

    • 向本地路由器 DNS 服务器（如 192.168.1.1）发送请求。
    • 若本地 DNS 无缓存，依次查询：
      1. 根域名服务器（.com）→ 2. 顶级域名服务器（.com）→ 3. 权威域名服务器（example.com）。
    • 最终获取服务器 IP 地址（如 14.215.177.39）。

三、TCP 连接与 TLS 握手（HTTPS 场景）

  1. TCP 三次握手（耗时约 1 RTT）

    • 客户端 → 服务器：发送 SYN 包（seq=x），请求建立连接。
    • 服务器 → 客户端：发送 SYN+ACK 包（seq=y, ack=x+1）。
    • 客户端 → 服务器：发送 ACK 包（ack=y+1），连接建立。

  2. TLS 握手（HTTPS 比 HTTP 多 1-2 RTT）

    • 客户端发送：支持的加密算法、随机数等。
    • 服务器响应：证书（含公钥）、选定的加密算法、随机数。
    • 客户端验证：证书有效性（CA 签名、域名匹配），生成对称密钥（用服务器公钥加密）。
    • 服务器解密：获取对称密钥，双方用对称加密通信。

四、HTTP 请求发送与服务器处理

  1. 请求构造

    • GET 请求示例： 
      GET /path?query=1 HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows)
Cookie: session_id=12345

  2. 服务器处理流程

    • 负载均衡：请求先到负载均衡器（如Nginx），转发到具体服务器。
    • Web 服务器解析：Nginx/Apache 解析请求路径，交给后端应用（如Node.js/Java）。
    • 应用逻辑处理：
      • 读取数据库（如查询商品信息）。
      • 生成动态内容（如渲染HTML模板）。
    • 响应构造： 
      HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: max-age=3600
Set-Cookie: new_session=67890
<html>...</html>

五、浏览器接收响应与渲染页面

  1. 响应处理

    • 解析状态码：200（成功）、301（永久重定向）、404（资源不存在）。
    • 处理重定向（如 302 Found 时，浏览器自动发起新请求）。

  2. 渲染引擎工作流程

    • 构建 DOM 树：解析 HTML → 生成 DOM 节点 → 构建树形结构。
    • 构建 CSSOM 树：解析 CSS → 生成样式规则 → 关联 DOM 节点。
    • 生成渲染树：合并 DOM 和 CSSOM，过滤不可见元素（如 display: none）。
    • 布局（Layout）：计算元素位置和尺寸（如 width: 50% 转换为具体像素）。
    • 绘制（Paint）：将像素数据绘制到屏幕，支持 GPU 加速（如 transform 动画）。

  3. 资源加载优化

    • 并行加载 JS/CSS/图片：现代浏览器可同时打开 6-8 个 TCP 连接。
    • 处理异步资源：defer/async 脚本、loading="lazy" 图片。

六、JS 执行与页面交互

  1. JS 引擎工作

    • V8 引擎解析 JS 代码 → 编译为机器码 → 执行（如初始化页面交互）。
    • 触发 DOMContentLoaded 事件（HTML 解析完成时）。

  2. 页面交互初始化

    • 绑定事件监听（如按钮点击）、发起 AJAX 请求、初始化框架（如 React 渲染）。

七、问题

1. 问：HTTPS 比 HTTP 慢在哪里？如何优化？

  • 答：
    • 额外的 TLS 握手（多 1-2 个 RTT）和加密计算开销。
    • 优化：使用 HTTP/2（多路复用）、HSTS（预存 HTTPS 域名）、会话复用（Session Resume）。

2. 问：DNS 污染如何解决？

  • 答：
    • 使用公共 DNS（如 Cloudflare 1.1.1.1、阿里 223.5.5.5）。
    • 部署 DNS over TLS（DoT）或 DNS over HTTPS（DoH），加密 DNS 查询。

3. 问：浏览器如何处理响应中的重定向？

  • 答：
    • 解析响应头 Location 字段，自动发起新请求（最多允许 10 次重定向，避免循环）。
    • 301（永久重定向）会被浏览器缓存，下次直接请求新地址。
avatar
文章
阅读
粉丝