网页与浏览器工作过程

学习目标

这一课带你完整跟踪一次网页访问：从输入网址，到服务器返回文件，再到浏览器把内容画到屏幕上。读完你应该能说出这条链路的关键步骤，并且会用开发者工具（DevTools，浏览器内置的调试面板）查清楚「某个资源为什么没加载出来」。

问题场景

你打开一个学习网站的首页：标题和正文都在，但头像图片显示为空白，控制台里还有红色报错。刷新没用，换浏览器也没用。与其瞎猜「是不是网站挂了」，不如让浏览器自己交代——Network（网络）面板会列出页面发出的每一个请求和它的结果。

核心解释

在地址栏输入 URL（Uniform Resource Locator，统一资源定位符，俗称网址）并回车后，大致发生四步：

1. 请求：浏览器向服务器发出 HTTP 请求（HTTP 是浏览器与服务器之间约定好的对话格式）。
2. 响应：服务器返回 HTML 文档，并附带状态码——200 表示成功，404 表示找不到，500 表示服务器出错。
3. 解析：浏览器读取 HTML，构建 DOM（Document Object Model，文档对象模型，页面内容的树状表示），同时继续下载其中引用的 CSS、图片、JS。
4. 渲染：把 DOM 和样式结合起来，计算每个元素的位置与外观，绘制到屏幕上。

关键认识：一个页面不是一次请求，而是「先拿 HTML，再按需拿图片、CSS、JS」的许多次请求。任何一次失败只影响它负责的部分——图片 404 不影响文字显示，但关键 JS 失败可能让整个按钮失效。

示例拆解

写一个三行的页面，故意引用两个不存在的文件：

<h1>资源加载实验</h1>
<img src="avatar.png" alt="头像">
<script src="app.js"></script>

把它存成 index.html，用本地服务器打开（例如在文件所在目录运行 python -m http.server），按 F12 打开开发者工具：

• Network 面板里 avatar.png 和 app.js 两行的状态码都是 404——这就是「哪出了问题」的第一现场，Name 列是文件名，Status 列是状态码。
• Console（控制台）会出现红色报错，大致长这样：

GET http://localhost:8000/avatar.png 404 (Not Found)
Failed to load resource: the server responded with a status of 404 (Not Found)

• 注意 h1 的文字照常显示：解析和渲染没有因为两个资源失败而中断，这正是「请求彼此独立」的直接证据。

动手任务

打开本课实验区，完成两件事：

1. 页面里故意放了断链的图片和脚本。打开 Network 面板并刷新，找到这两条 404 请求，记下 Name 和 Status 列的内容。
2. 把 <img src="avatar.png"> 的地址改成 https://picsum.photos/120（一个公开测试图服务）再运行，观察状态码从 404 变成 200、图片正常显示。

没有实验条件时可以本机操作：把上面的三行代码存成 index.html，用 python -m http.server 或 VS Code 的 Live Server 插件起本地服务再打开（直接双击文件用 file:// 打开，Network 面板看不到完整信息）。

常见错误

• 把控制台报错当成页面崩溃：资源 404 只是这一个文件失败，页面其余部分照常工作；先看清报错的是哪个文件再动手。
• 用 file:// 双击打开排查加载问题：很多能力（fetch、ES 模块、缓存行为）在文件协议下受限，结论不可靠，要用本地服务器。
• 只看 Console 不看 Network：Console 告诉你「失败了」，Network 面板才告诉你「哪个请求、什么状态码、多大、多久」。
• 以为刷新能解决 404：404 是服务器明确回答「没有这个文件」，原因通常是路径拼错、文件没上传或大小写不符，刷新无效。

检查与复盘

完成下方检查题确认理解。自查清单：

• 能按顺序说出请求、响应、解析、渲染四步，以及每一步的产物
• 会打开 Network 面板，找到失败请求的状态码并解释它意味着什么
• 能解释「图片挂了但文字正常」的原因，并知道去哪里确认

参考资料

• MDN：Web 是如何工作的 —— 本课链路的更完整展开
• MDN：HTTP 概述 —— 请求、响应与状态码的正式定义
• Chrome DevTools：Network 面板 —— 面板每一列的含义与常用过滤技巧