K 的一隅

浏览器 浏览器导航与页面加载

在地址栏输入 URL 后，浏览器究竟做了什么

从输入一个店铺地址到看到页面，串起 URL 解析、DNS、TLS、HTTP、缓存、重定向和 HTML 交接。

4 分钟阅读 更新于 2026-07-24
本文目录

从地址栏输入一个店铺地址到推门进去，中间不是“电话打过去，店铺立刻出现”这么简单。系统要先判断你输入的是地址还是搜索词，查到店铺所在位置，建立通道，确认身份，取回入口说明，最后才开始布置店内空间。

浏览器导航也是一条跨层链路。URL、DNS、TLS、HTTP、缓存和 HTML 解析各自负责一段。本文只给出一张能用于排查的地图，不把 DNS 或 TCP 写成网络协议教程。

先猜：输入 URL 后第一件事是什么 ​

导航不是一次“打开文件”的动作，而是一串有依赖关系的阶段。

在地址栏输入：

text
https://example.com:8443/articles/?q=browser#event

浏览器不会把整段字符串原样交给服务器。协议是 https，主机是 example.com，端口是 8443，路径是 /articles/，查询参数是 q=browser，片段是 event。片段通常只在浏览器本地用于定位文档，不会作为 HTTP 请求的一部分发送到服务器。

如果输入的是“浏览器原理”而不是看起来像 URL 的文本，地址栏可能把它交给默认搜索引擎。这个判断发生在导航真正开始之前，所以“我输入了一段文字”不一定意味着“浏览器访问了一个主机”。

DNS 只是查地址 ​

DNS（Domain Name System，域名系统）把主机名查询成 IP 地址。它像电话簿，但电话簿只告诉你号码，不代表电话已经接通，更不代表对方已经同意交谈。

浏览器可能从多层缓存获得 DNS 结果：浏览器、操作系统、局域网解析器或网络服务。命中缓存时，时间线里看不到一次完整的外部查询；没有命中时，解析可能涉及多个 DNS 服务器。

同一个域名可能有多个地址，浏览器还要根据网络情况、连接复用和协议选择合适路径。不要把“DNS 慢”当作所有首屏慢的答案；Network 面板中 DNS、连接、TLS 和等待响应应分别看。

TCP、TLS 和 HTTP 各自完成什么 ​

HTTPS 导航通常需要一个可靠的传输连接，并通过 TLS（Transport Layer Security，传输层安全）协商加密和证书身份。TLS 不是“把 URL 加密一下”，而是让双方建立加密会话，并验证你连接的服务是否拥有可信证书。

连接建立后，浏览器发送 HTTP 请求：

http
GET /articles/?q=browser HTTP/2
Host: example.com
Accept: text/html

服务器返回状态码、响应头和正文。状态码可能是 200，可能是 304 缓存验证，也可能是 301/302 重定向。重定向意味着浏览器需要根据新的 Location 再导航一次；它会影响时间线，也可能改变协议、主机或权限边界。

HTTP/2、HTTP/3、连接复用和预连接会改变具体耗时。浏览器不一定每次都从“新建 TCP”开始；已有连接、缓存、Service Worker 和预解析都可能让某些步骤被跳过或提前。

缓存可能让网络根本没有走到服务器 ​

如果资源仍然新鲜，浏览器可以从 memory cache 或 disk cache 返回 HTML；如果需要验证，可能带上 ETag 得到 304。Service Worker 也可能在请求到达网络之前拦截导航，返回自己的缓存或转发结果。

js
navigator.serviceWorker?.controller?.postMessage({ type: 'check' })

这个消息不能证明导航一定经过 Service Worker，它只说明当前页面可能已经受 Worker 控制。首次安装、等待激活、旧页面和新页面之间存在生命周期差异。排查时要看 Application 面板和 Network 的请求来源，不要仅凭“注册过 Worker”就下结论。

HTML 到达只是交接点 ​

浏览器拿到 HTML 后，导航的后半段才真正开始：解析器逐步读正文，构建 DOM，发现 CSS、脚本、图片和字体，再把这些工作交给资源加载和渲染管线。HTML 不是一次性等全部完成后才开始处理；流式响应可能让解析和资源发现提前发生。

js
performance.mark('navigation-observed')
console.log(document.readyState)

document.readyState 可能是 loading、interactive 或 complete。它和 DOMContentLoaded、load 的关系能帮助判断页面走到哪一步，但不能单独说明用户已经看到了完整首屏。第二篇会拆解析、脚本和资源加载，第三篇再讲怎样从关键渲染路径判断首屏为何迟迟不出现。

容易踩的坑 ​

地址栏输入并不总是严格按 DNS→TCP→TLS 逐步走：缓存、连接复用和预连接都会改路径。DNS 拿到 IP 也不等于页面开始下载，建连与 HTTP 仍是后续层。#fragment 通常只留在浏览器本地，不会发给服务器。收到 200 更不等于用户已经看到完整页——HTML 还要解析，CSS、脚本和渲染可能继续拖。