浏览器为什么“遇到标签才请求资源”？

一、浏览器是什么

简单来说，浏览器是一个安装在你的电脑或手机上的软件，它的核心使命是：把互联网上的代码，翻译成你能看懂、能点击、能观看的网页。

为了更清楚地理解它，我们可以从几个层面来看：

1. 从你的视角看：它是一扇"窗户"

你打开 Chrome、Edge、Safari 或 Firefox，输入网址，按下回车，然后看到了文字、图片和视频。对你而言，浏览器就是通往互联网世界的入口。它负责：

接收指令：你输入的网址或点击的链接。
展示内容：把网页漂亮地画在屏幕上。
处理交互：你滚动页面、填写表单、点击按钮，都由它响应。

2. 从技术视角看：它是一个"复杂的解释器"

这是浏览器最核心的工作。当它从服务器拿到一个网页后，会进行一系列复杂的处理：

解析 HTML：HTML 是网页的"骨架"。浏览器读取它，知道了哪里是标题、哪里是段落、哪里是图片。
解析 CSS：CSS 是网页的"皮肤"。浏览器根据它来决定文字的颜色、大小、布局。
执行 JavaScript ：JavaScript 是网页的"肌肉和神经"。它让网页动起来，比如弹出菜单、验证表单、加载新内容。浏览器内置的 JavaScript 引擎（如 V8）会高速执行这些代码。
渲染：最后，浏览器把骨架、皮肤和肌肉组合起来，通过渲染引擎（如 Blink、WebKit）计算每个元素应该在屏幕的哪个像素位置，然后绘制出来。

这个过程通常在几十毫秒内完成，你感觉不到延迟。

3. 从互联网视角看：它是一个"智能代理人"

浏览器不只是被动地显示页面，它还会主动为你做很多事：

发送 HTTP 请求：当你输入网址，浏览器会向对应的服务器发送请求，说"请把那个网页的数据给我"。
管理缓存：它会记住你下载过的图片和文件，下次访问时直接使用，加快速度。
处理安全：它通过 HTTPS 加密你的连接，防止信息被窃听；它会拦截恶意网站和弹窗广告。
管理 Cookie：它保存你的登录状态、购物车信息，让你不用每次刷新都重新登录。
运行插件/扩展：它允许你安装广告拦截器、密码管理器等，来增强功能。

总结一下

浏览器是一个集网络通信、代码解析、图形渲染、安全防护于一体的复杂系统。它既是你看世界的窗口，也是互联网技术最集中的体现。没有它，互联网对普通人来说，可能只是一堆看不见的代码和电缆。

二、浏览器为什么"遇到标签才请求资源"？

一个看似奇怪的现象

如果你用过浏览器的开发者工具，打开 Network（网络）面板，刷新一个网页，会看到一连串的请求：

第一个请求通常是 index.html
然后是 style.css、app.js
接着是各种图片、字体、接口数据......

这些请求不是同时发出的，而是有先后顺序 的。更准确地说，浏览器是先拿到 HTML，解析到某个标签时，才去请求对应的资源。

这看起来有点"笨"：既然迟早都要加载，为什么不一次性全拿回来？

答案藏在 HTML 的设计哲学和网络请求的机制里。

一、浏览器第一次只拿到"图纸"

当你输入网址按下回车，浏览器向服务器请求的，并不是整个网页的所有东西 ，而只是一个纯文本文件------通常是 index.html。

这个文件里只有文字和标记：

复制代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>欢迎</h1>
  <img src="photo.jpg">
  <script src="app.js"></script>
</body>
</html>

它就像一份建筑图纸 ，上面写着"这里要放一张图片""那里要挂一幅画"，但图纸本身并不包含这些图片和画。

浏览器必须先读到这份图纸，才知道：

需要哪些资源
它们的地址是什么
哪些是阻塞的，哪些可以异步加载

二、为什么不能一次性全拿回来？

理论上，服务器确实可以把你需要的所有资源打包成一个巨大的文件发给你。但实际中不这么做，原因有三：

1. 不知道你要什么

同一个 HTML 文件，在不同设备、不同用户、不同操作下，需要的资源可能完全不同。手机端和电脑端可能加载不同的图片，登录用户和游客可能看到不同的内容。

2. 资源太多太大

一个现代网页可能包含几十张图片、几个视频、多个 CSS 和 JS 文件。如果全部塞进第一个请求里，首次加载会慢得无法忍受。

3. 缓存和复用

很多资源（比如网站的 Logo、通用的 CSS 框架）是多个页面共用的。分开请求，浏览器就能把它们缓存起来，下次直接读本地，不用重复传输。

所以，"按需请求"是更高效、更灵活的设计。

三、遇到不同标签，浏览器分别做什么？

浏览器逐行解析 HTML，就像一个边走边看的读者。遇到不同标签，它的反应完全不同：

1. 遇到 `<link rel="stylesheet">`

复制代码

<link rel="stylesheet" href="style.css">

浏览器知道："这里需要一份样式表。"

它会暂停渲染 （因为样式决定了页面长什么样），向服务器发请求去拿 style.css。拿到后，继续解析。

这也是为什么 CSS 通常放在 <head> 里------越早拿到样式，页面越早能正确显示，避免"闪一下无样式内容"（FOUC）。

2. 遇到 `<img src="photo.jpg">`

复制代码

<img src="photo.jpg">

浏览器知道："这里要显示一张图片。"

它会发起一个图片请求 ，但不会傻等。图片在后台下载，HTML 解析继续进行。等图片到了，再把它"画"到预留的位置上。

这就是为什么你打开网页时，常常先看到文字，图片再一张张"蹦"出来。

3. 遇到 `<script src="app.js"></script>`

复制代码

<script src="app.js"></script>

浏览器知道："这里有段脚本要执行。"

默认情况下，HTML 解析会暂停，直到这个 JS 文件下载并执行完毕。因为 JS 可能会修改 DOM，浏览器必须等它执行完才能继续。

这就是为什么 JS 通常放在 </body> 前面，或者加上 async / defer 属性------就是为了不阻塞页面显示。

把浏览器想象成一个装修队：

你（服务器）先给队长（浏览器）一份装修图纸（HTML）。
队长打开图纸，看到第一行写着"需要一桶油漆（CSS）"，于是派人去买。买回来刷上，继续看图纸。
看到"这里要挂一幅画（图片）"，又派人去买画。但这次他不等了，让工人继续按图纸施工，画到了再挂。
看到"这里要接一个电路（JS）"，他必须停下来，等电工把线路接好、测试完，才能继续下一步，因为电路可能影响后续所有施工。

"遇到标签才请求"不是缺陷，而是浏览器在"未知全貌"的情况下，为了尽快呈现内容、避免阻塞，而采取的一种分阶段、按需加载的策略。

四、这种设计带来了什么？

好处：

更快首屏：不用等所有资源下载完，页面就能开始显示。
更省带宽：只加载真正需要的资源。
更灵活：可以根据设备、用户、场景动态决定加载什么。
更好缓存：公共资源可以复用，不用每次重新下载。

代价：

请求次数多：一个页面可能发出几十甚至上百个请求。
顺序敏感：CSS 和 JS 的放置位置会影响渲染性能。
需要优化：所以才有了打包、压缩、懒加载、预加载等一系列前端优化手段。

五、总结

浏览器的工作流程，可以概括为一句话：

先拿 HTML 骨架，边解析边发现资源需求，遇到标签才请求，按阻塞与否决定是否等待。

第一次只拿到 HTML 骨架。
HTML 里的标签就是资源需求的声明。
浏览器解析到标签时，才知道要请求什么、怎么处理。
这种**"边解析、边请求、边渲染"** 的流水线，是为了在速度、灵活性和资源复用之间取得最佳平衡。

所以，下次你打开开发者工具，看到那一串按顺序出现的请求时，可以把它想象成浏览器正在逐行阅读图纸，一边读一边派人去取材料------这不是笨，而是一种精妙的工程取舍。

浏览器为什么“遇到标签才请求资源”？

一 、 浏览器是什么

1. 从你的视角看：它是一扇"窗户"

2. 从技术视角看：它是一个"复杂的解释器"

3. 从互联网视角看：它是一个"智能代理人"

总结一下

二 、 浏览器为什么"遇到标签才请求资源"？

一个看似奇怪的现象

一、浏览器第一次只拿到"图纸"

二、为什么不能一次性全拿回来？

三、遇到不同标签，浏览器分别做什么？

1. 遇到 <link rel="stylesheet">

2. 遇到 <img src="photo.jpg">

3. 遇到 <script src="app.js"></script>

四、这种设计带来了什么？

五、总结

一、浏览器是什么

二、浏览器为什么"遇到标签才请求资源"？

1. 遇到 `<link rel="stylesheet">`

2. 遇到 `<img src="photo.jpg">`

3. 遇到 `<script src="app.js"></script>`