Hoey

外观

传输过程

约 638 字大约 2 分钟

2026-02-03

问题

简单描述从输入网址到页面显示的过程。

  1. URL 解析
    浏览器解析输入内容：确认协议（HTTP/HTTPS）、域名、端口（默认 443/80）、路径等；若输入非标准网址（如“百度”），可能触发搜索引擎跳转（本题假设为完整 URL）。

  2. 缓存检查
    优先检查浏览器缓存（强缓存/协商缓存）、系统 hosts 文件等。若资源有效且未过期，直接渲染页面，流程结束。

  3. DNS 解析
    无缓存时，浏览器向 DNS 系统查询域名对应 IP：
    浏览器缓存 → 系统 hosts → 本地 DNS → 递归查询（根域→顶级域→权威 DNS），最终获取服务器 IP。

  4. 建立网络连接

    • TCP 三次握手：客户端与服务器建立可靠连接。
    • TLS 握手（HTTPS）：协商加密套件、验证证书、生成会话密钥，建立安全通道（HTTP 可跳过此步）。

  5. 发送 HTTP 请求
    浏览器构造请求报文（含方法、路径、Header 等），通过连接发送至服务器。

  6. 服务器处理与响应
    服务器接收请求，处理逻辑（如查数据库），返回 HTTP 响应（状态码、Header、HTML 内容等）；若遇 301/302 重定向，浏览器将重新发起请求。

  7. 浏览器渲染页面

    • 解析构建：解析 HTML 生成 DOM 树，解析 CSS 生成 CSSOM 树（并行下载外部资源）。
    • 合成与绘制：合并 DOM + CSSOM → 渲染树 → 计算布局（Layout）→ 绘制像素（Paint）→ 合成图层（Composite）。
    • JS 执行：遇到 <script> 会暂停 HTML 解析（除非 async/defer），执行可能修改 DOM/CSSOM，触发重排/重绘。
    • 渐进渲染：现代浏览器支持边下载边渲染（如遇到 <img> 会异步加载），用户可提前看到部分内容。

  8. 加载子资源
    HTML 中引用的 JS、CSS、图片、字体等触发新一轮“DNS→连接→请求→渲染”循环（浏览器会复用 TCP 连接、预加载关键资源以优化速度）。

  9. 页面就绪
    所有资源加载完成，触发 DOMContentLoaded（DOM 构建完成）和 load 事件，页面完全呈现。

补充说明

  • 实际过程含大量优化：HSTS 强制 HTTPS、HTTP/2 多路复用、连接 Keep-Alive 复用、预解析 DNS 等。
  • 安全机制：TLS 证书验证防止中间人攻击；同源策略限制跨域资源。
  • 用户感知：从输入到首屏显示（FCP）的时间受网络、服务器、资源大小、渲染阻塞等多因素影响。