从输入URL到页面渲染：你每天输入网址回车，但你知道这一瞬间浏览器经历了多少道工序吗？从 DNS 解析到 TCP 握手，从 HTTP 请求到关键渲染路径，本文用最通俗的语言，带你走完浏览器从"敲回车"到"看到页面"的完整旅程。一、全景概览：一共分两大阶段整个过程可以分为 网络层 和 渲染层 两大阶段：输入URL → 【网络层】 → 拿到HTML/CSS/JS资源 → 【渲染层】 → 像素显示在屏幕整个完整流程大约 10 步：网络层（5步）：1. URL 解析与导航2. DNS 域名解析3. 建立 TCP 连接（+ TLS 握手）4. 发送 HTTP 请求5. 接收响应，逐步加载资源渲染层（5步）：6. 解析 HTML 构建 DOM 树7. 解析 CSS 构建 CSSOM 树8. 构建渲染树 + 布局（回流）9. 绘制（重绘）10. 分层合成 + GPU 显示下面我们一步步来。第一部分：网络层——浏览器怎么把资源拿回来？二、第1步：URL 解析与导航发起2.1 什么是 URL？你在地址栏输入的 https://www.baidu.com/index.html?name=hi#top 就是一个 URL，它由几部分组成：https://www.baidu.com/index.html?name=hi#top└─┬──┘ └────┬─────┘ └───┬────┘ └──┬──┘ └┬┘ 协议 主机 路径 查询 锚点• 协议（Scheme）：https，决定用什么规则通信• 主机（Host）：www.baidu.com，服务器的名字• 路径（Path）：/index.html，要哪个文件• 查询参数（Query）：?name=hi，传给服务器的额外参数• 锚点（Hash）：#top，浏览器本地定位，不发给服务器2.2 浏览器先判断你输入的是什么你敲完回车，浏览器第一件事不是直接发请求，而是先判断：• 这是个 URL 吗？→ 是的话就导航过去• 这是搜索词吗？→ 不是 URL 的话，就用默认搜索引擎去搜确认是导航后，浏览器进程（Browser Process）的 UI 线程会通知网络进程（Network Process）："去这个地址把东西拿回来。"💡 小知识：Chrome 是多进程架构。地址栏、前进后退按钮属于 Browser 进程；真正发网络请求的是独立的 Network 进程；页面渲染在 Renderer 进程。它们之间通过 IPC（进程间通信）传话。三、第2步：DNS 域名解析——把域名翻译成 IP 地址3.1 为什么需要 DNS？网络世界里，每台电脑的地址是 IP（比如 180.101.50.242），但人记不住一串数字，所以发明了域名（比如 baidu.com）。DNS（Domain Name System）就是互联网的"电话本"：输入域名，返回对应的 IP 地址。3.2 DNS 查询的完整过程查 DNS 不是一下就查到的，而是一层一层问：浏览器缓存 → 系统缓存 → 本地DNS服务器 → 根域名服务器 → 顶级域服务器 → 权威服务器逐层解释：1. 浏览器缓存：浏览器自己先查，最近访问过的域名直接记住了（Chrome 大概缓存 1 分钟到 1 小时不等）2. 操作系统缓存：浏览器没找到，问操作系统，系统也有缓存（hosts 文件就在这一层）3. 本地 DNS 服务器：通常是你的运营商（电信、联通）提供的，它也有缓存4. 根域名服务器：本地 DNS 不知道，就去问"根服务器"
从输入URL到页面渲染：你每天输入网址回车，但你知道这一瞬间浏览器经历了多少道工序吗？从 DNS 解析到 TCP 握手，从 HTTP 请求到关键渲染路径，本文用最通俗的语言，带你走完浏览器从"敲回车"到"看到页面"的完整旅程。一、全景概览：一共分两大阶段整个过程可以分为 网络层 和 渲染层 两大阶段：输入URL → 【网络层】 → 拿到HTML/CSS/JS资源 → 【渲染层】 → 像素显示在屏幕整个完整流程大约 10 步：网络层（5步）：1. URL 解析与导航2. DNS 域名解析3. 建立 TCP 连接（+ TLS 握手）4. 发送 HTTP 请求5. 接收响应，逐步加载资源渲染层（5步）：6. 解析 HTML 构建 DOM 树7. 解析 CSS 构建 CSSOM 树8. 构建渲染树 + 布局（回流）9. 绘制（重绘）10. 分层合成 + GPU 显示下面我们一步步来。第一部分：网络层——浏览器怎么把资源拿回来？二、第1步：URL 解析与导航发起2.1 什么是 URL？你在地址栏输入的 https://www.baidu.com/index.html?name=hi#top 就是一个 URL，它由几部分组成：https://www.baidu.com/index.html?name=hi#top└─┬──┘ └────┬─────┘ └───┬────┘ └──┬──┘ └┬┘ 协议 主机 路径 查询 锚点• 协议（Scheme）：https，决定用什么规则通信• 主机（Host）：www.baidu.com，服务器的名字• 路径（Path）：/index.html，要哪个文件• 查询参数（Query）：?name=hi，传给服务器的额外参数• 锚点（Hash）：#top，浏览器本地定位，不发给服务器2.2 浏览器先判断你输入的是什么你敲完回车，浏览器第一件事不是直接发请求，而是先判断：• 这是个 URL 吗？→ 是的话就导航过去• 这是搜索词吗？→ 不是 URL 的话，就用默认搜索引擎去搜确认是导航后，浏览器进程（Browser Process）的 UI 线程会通知网络进程（Network Process）："去这个地址把东西拿回来。"💡 小知识：Chrome 是多进程架构。地址栏、前进后退按钮属于 Browser 进程；真正发网络请求的是独立的 Network 进程；页面渲染在 Renderer 进程。它们之间通过 IPC（进程间通信）传话。三、第2步：DNS 域名解析——把域名翻译成 IP 地址3.1 为什么需要 DNS？网络世界里，每台电脑的地址是 IP（比如 180.101.50.242），但人记不住一串数字，所以发明了域名（比如 baidu.com）。DNS（Domain Name System）就是互联网的"电话本"：输入域名，返回对应的 IP 地址。3.2 DNS 查询的完整过程查 DNS 不是一下就查到的，而是一层一层问：浏览器缓存 → 系统缓存 → 本地DNS服务器 → 根域名服务器 → 顶级域服务器 → 权威服务器逐层解释：1. 浏览器缓存：浏览器自己先查，最近访问过的域名直接记住了（Chrome 大概缓存 1 分钟到 1 小时不等）2. 操作系统缓存：浏览器没找到，问操作系统，系统也有缓存（hosts 文件就在这一层）3. 本地 DNS 服务器：通常是你的运营商（电信、联通）提供的，它也有缓存4. 根域名服务器：本地 DNS 不知道，就去问"根服务器"
