浏览器输入 URL 后发生了什么？页面加载流程全解析
从地址栏输入 URL 开始，系统讲清浏览器如何补全地址、发起请求、解析 HTML、加载资源、执行 JavaScript，直到页面完成渲染。
浏览器输入 URL 后要经历哪些步骤？
很多人以为"输入 URL 回车"只是打开了一个网页，其实浏览器在背后做了很多事。
如果把整个过程拆开，它大致会经历这几个阶段：
- 处理 URL。
- 发起网络请求。
- 拿到 HTML 文档。
- 继续加载 CSS、图片、JavaScript 等资源。
- 执行 JavaScript，生成或修改页面内容。
- 页面渲染完成。
理解这条流水线，对爬虫学习特别重要。 因为你后面判断"数据到底来自哪里"，本质上就是在判断它落在这条流水线的哪个环节。
第一步：浏览器怎么处理 URL？
当你在地址栏输入一个网址后，浏览器并不是立刻发请求，它会先做一轮标准化处理。
常见处理包括：
- 补全协议，比如自动加上
http://或https://。 - 对非 ASCII 字符做 URL 编码。
- 把最终地址整理成可以真正发请求的完整 URL。
这里最关键的一点是：浏览器真正发送请求时，用的一定是完整 URL。
也就是说，浏览器输入框里看起来"像地址"的东西，和真正能发出去的地址，不一定是同一个形态。
第二步：浏览器怎么向服务器发起请求？
URL 处理完成后，浏览器会向服务器发起 GET 请求。
如果服务器正常返回，浏览器会收到一个响应。 这个响应里最核心的是响应头和响应体：
- 响应头告诉浏览器"这是什么类型的内容"。
- 响应体里装着真正的资源内容。
对于你在地址栏输入的网页来说，服务器通常先返回的是 HTML 文档。
第三步：浏览器怎么根据 Content-Type 处理内容？
浏览器不会只看文件后缀，它更在意响应头里的 Content-Type。
如果响应头告诉它这是 text/html，浏览器就会把返回内容当作 HTML 来解析。
如果是 CSS，就按 CSS 处理。
如果是 JavaScript，就交给 JS 引擎执行。
这就是为什么同样是一个地址，返回不同 Content-Type 时，浏览器会表现出完全不同的行为。
第四步：HTML 是怎么被解析的？
浏览器拿到 HTML 后，会从上到下顺序解析。
解析过程中，它会遇到不同类型的标签：
link：通常引用 CSS。img：通常引用图片。script：通常引用 JavaScript。a：默认不会自动发请求，要等用户点击。
这一步很像浏览器边读边做决定。 看到一个资源，就根据资源类型继续往下处理。
第五步：CSS、图片、JS 等资源是怎么加载的？
当浏览器解析到 link、img、script 这类资源引用时，它会继续发请求去拿这些内容。
这里经常会遇到一个细节：路径不一定写的是完整 URL。 这时候就要先分清 绝对路径 和 相对路径。
比如：
<link rel="stylesheet" href="/css/main.css" />
<img src="./logo.svg" />
<script src="js/app.js"></script>
这些路径如果不是完整 URL，浏览器就会先补全，再去请求。
想把这块理解得更扎实，可以继续看 绝对路径和相对路径是什么？浏览器如何补全资源地址。
第六步：JavaScript 怎么改变页面内容？
当浏览器拿到 JavaScript 文件后，会把它交给 JS 引擎执行。
JavaScript 执行后，页面可能发生这些变化：
- 新增元素。
- 删除元素。
- 修改文本。
- 请求接口并把接口结果渲染到页面上。
所以你在页面上看到的内容，并不一定都来自最初返回的 HTML。
这点对爬虫特别关键，因为它直接决定了你是要：
- 直接解析 HTML。
- 还是去分析 JavaScript 发起的接口请求。
第七步：为什么源代码和页面内容不一样？
很多初学者第一次看浏览器开发者工具时，都会有这个疑问： "页面上明明有内容，为什么查看网页源代码却找不到？"
原因很简单：
- 网页源代码看到的是服务器最初返回的 HTML。
- 页面上看到的是浏览器执行完 JavaScript 之后的最终结果。
也就是说，源代码是"起点"，页面上的内容是"结果"。
如果某些数据是 JS 动态生成的，源代码里可能完全没有，但 Elements 面板里已经出现了。
第八步：Elements 面板展示的是什么？
浏览器里的 Elements 面板看到的，不是静态文本，而是当前实时的 DOM 结构。
你可以在控制台里选中一个元素，然后通过 $0 快速引用它。
比如你修改了 $0 的文本内容，Elements 面板会立刻变化。
但这并不意味着网页源代码也变了，因为源代码还是服务器返回的原始 HTML。
这就是"源代码"和"当前页面 DOM"之间最重要的区别。
第九步：怎么判断一个页面是不是动态页面？
如果你想快速判断一个页面是不是动态页面，可以按这个顺序观察：
- 先看页面上有没有目标数据。
- 再看网页源代码里有没有。
- 如果源代码没有，但页面上有，去 Elements 面板看。
- 如果 Elements 里有，大概率是 JavaScript 生成或渲染的。
- 再去 Network 面板找对应接口。
这个判断顺序，基本能覆盖大多数网页数据源分析场景。
如果你想继续分清"源代码"和"Elements"到底差在哪，可以接着看 网页源代码和 Elements 有什么区别？静态页面与动态页面怎么判断。
浏览器页面加载流程怎么记最实用？
你可以把页面加载流程记成一句话：
URL 先被浏览器整理，HTML 先被拉回来，资源继续补齐，JavaScript 再把页面"活"起来。
只要这条主线清楚了，你后面学抓包、接口复现、静态页和动态页判断，都会顺很多。
总结
浏览器输入 URL 后发生的事，不是"打开一个页面"这么简单，而是一整套连续动作：
- 处理 URL。
- 请求 HTML。
- 解析资源。
- 执行 JavaScript。
- 渲染最终页面。
这篇文章最重要的价值，是帮你建立一个判断框架。 当你以后面对任何网页时，都可以先问自己：这个数据是在 HTML 里，还是在 JavaScript 之后才出现的？
Practice