Web前端开发文档
中文
版本: 3.1.0 文档中心

网页诞生记：浏览器与网络基础

当我们在浏览器地址栏输入一个网址并按下回车后，页面并不是“瞬间出现”的。背后其实发生了一整套复杂而有序的流程：查找服务器地址、建立网络连接、发送请求、下载资源、解析代码、渲染页面、执行脚本，最终才变成我们眼前可以点击和滚动的网页。

如果说 HTML 定义了网页的结构，CSS 决定了网页的样式，JavaScript 负责网页的交互，那么浏览器与网络就是把这一切真正送到用户面前的幕后系统。

1. 浏览器到底做了什么

浏览器并不只是一个“打开网页的工具”，它本质上是一个综合运行环境，核心职责包括：

  1. 发送网络请求：向服务器获取 HTML、CSS、JS、图片、字体等资源。
  2. 解析网页代码：读取 HTML、CSS、JavaScript 的内容并理解它们的含义。
  3. 构建页面结构：把 HTML 变成 DOM 树，把 CSS 变成样式规则。
  4. 执行脚本逻辑：运行 JavaScript，让页面拥有动态交互能力。
  5. 渲染可视界面：把代码最终绘制成用户看到的按钮、文字、图片和布局。

从专业前端开发的角度看，浏览器既是“解释器”，也是“渲染器”，还是“资源调度器”。

2. 从输入 URL 到页面显示，中间发生了什么

这是浏览器与网络最核心的一条主线，也是前端学习中必须理解的流程。

💡 本篇关注的是“浏览器拿到资源后整体发生了什么” 如果你更想知道“前端代码如何主动发请求、处理响应、把数据渲染到页面”，更适合继续阅读后面的 Fetch / Ajax 主题。

2.1 第一步：解析 URL

例如我们输入：

https://www.example.com/index.html

这个地址通常可以拆成几个部分：

  • https：协议，表示使用 HTTPS 进行通信。
  • www.example.com：域名，表示目标服务器。
  • /index.html：资源路径，表示要访问服务器上的哪个资源。

浏览器首先要搞清楚：你想访问的是哪个网站、要用什么协议、要取哪个资源。

2.2 第二步：DNS 解析

浏览器并不能直接识别 www.example.com 这样的域名，它真正通信依赖的是 IP 地址。

DNS（Domain Name System，域名系统）的作用就是：

把人类容易记忆的域名，转换成计算机能够识别的 IP 地址。

例如：

www.example.com -> 93.184.216.34

如果本地缓存、系统缓存或 DNS 服务器中已经有记录，这一步会更快；如果没有，就需要逐层查询。

2.3 第三步：建立连接

找到服务器 IP 后，浏览器要与目标服务器建立网络连接。

  • 如果是 HTTP，通常直接建立 TCP 连接。
  • 如果是 HTTPS，除了 TCP 连接外，还需要进行 TLS/SSL 握手，确保通信过程被加密。

💡 你可以这样理解： HTTP 像明信片，内容可能被别人看到； HTTPS 像加密信封，更适合传输账号、密码、支付信息等敏感数据。

2.4 第四步：发送 HTTP 请求

连接建立后，浏览器会发送一个 HTTP 请求给服务器。

一个简化后的请求大致像这样：

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html

这表示浏览器在说：

  • 我想用 GET 方法获取 /index.html
  • 我要访问的主机是 www.example.com
  • 我能接收 HTML 等内容

2.5 第五步：服务器返回响应

服务器收到请求后，会根据路径和业务逻辑返回对应的资源。

一个简化后的响应可能像这样：

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8

<html>
  <head><title>示例页面</title></head>
  <body><h1>Hello Web</h1></body>
</html>

这表示：

  • 状态码是 200，请求成功
  • 返回内容是 HTML 文本
  • 浏览器接下来可以开始解析页面

2.6 第六步：浏览器继续下载其他资源

HTML 往往只是入口文件。浏览器在解析 HTML 时，还会继续发现并请求其他资源：

<link rel="stylesheet" href="styles.css">
<script src="main.js"></script>
<img src="banner.png" alt="横幅图片">

这时浏览器会继续发起请求，下载：

  • styles.css
  • main.js
  • banner.png

所以一个网页通常不是“一次请求”完成的，而是多个资源共同组成的结果。

3. HTTP 是什么

HTTP（HyperText Transfer Protocol，超文本传输协议）是浏览器和服务器之间交换数据的基础规则。

你可以把它理解成一种“沟通格式”。浏览器和服务器都按照这套规则来收发消息，彼此才能理解对方。

3.1 常见请求方法

  • GET：向服务器获取数据。常用于读取页面、查询列表、搜索内容。
  • POST：向服务器提交数据。常用于登录、注册、提交表单。
  • PUT：整体更新资源。
  • PATCH：局部更新资源。
  • DELETE：删除资源。

在入门阶段，最常见的是 GET 和 POST。

3.2 常见状态码

浏览器发出请求后，服务器会用状态码告诉你结果如何。

  • 200 OK：请求成功。
  • 301 Moved Permanently：资源永久重定向到新地址。
  • 302 Found：临时重定向。
  • 304 Not Modified：资源没有变化，可以使用缓存。
  • 404 Not Found：资源不存在。
  • 500 Internal Server Error：服务器内部错误。

⚠️ 开发中最常见的两个报错： 404 通常意味着路径写错了； 500 通常意味着服务器代码或配置出问题了。

3.3 请求头与响应头

HTTP 消息中除了正文，还有很多“附加说明”，这就是请求头和响应头。

例如：

  • 请求头里的 Content-Type 表示发送的数据类型
  • 请求头里的 Authorization 常用于携带身份认证信息
  • 响应头里的 Cache-Control 用于控制缓存
  • 响应头里的 Content-Type 用于告诉浏览器返回内容是什么格式

这些头信息在前端调试中非常重要，后面用开发者工具时会经常看到。

4. 浏览器如何解析 HTML、CSS 与 JavaScript

浏览器拿到资源以后，并不会直接“显示代码”，而是会把它们一步步转换成页面。

4.1 HTML 变成 DOM

浏览器会把 HTML 文档解析成一棵树形结构，叫作 DOM 树（Document Object Model）。

例如：

<body>
  <h1>标题</h1>
  <p>这是段落</p>
</body>

会被理解成一种父子层级关系：

  • body
  • h1
  • p

之后 JavaScript 操作页面，本质上就是在操作这棵 DOM 树。

4.2 CSS 影响页面样式

浏览器解析 CSS 后，会得到一套样式规则，再把这些规则和 DOM 元素对应起来。

例如：

h1 {
  color: blue;
  font-size: 32px;
}

浏览器会知道：

  • 页面中的 <h1> 要显示为蓝色
  • 字号要变成 32px

4.3 DOM 与样式结合成可渲染结构

浏览器会把 HTML 结构和 CSS 样式信息结合起来，生成最终用于绘制页面的结构。

你可以粗略理解为：

  1. HTML 提供“有哪些元素”
  2. CSS 提供“这些元素长什么样”
  3. 浏览器把两者合并后，才能真正开始绘制页面

4.4 渲染流水线：页面是怎么一步步画出来的

前面我们已经知道 HTML 会变成 DOM，CSS 会变成样式规则。接下来浏览器并不是“立刻显示页面”，而是还要经历一条更完整的渲染流水线。

你可以把它概括成下面几个阶段：

  1. 解析 HTML，构建 DOM
  2. 解析 CSS，构建 CSSOM
  3. 合成 Render Tree（渲染树）
  4. Layout（布局 / 回流）：计算每个元素的位置和尺寸
  5. Paint（绘制 / 重绘）：把颜色、边框、文字、阴影等画出来
  6. Composite（合成）：把不同图层组合到屏幕上

这里有几个关键词非常重要：

DOM

DOM 决定“页面有哪些节点”。

CSSOM

CSSOM 可以理解成浏览器整理出来的一份“样式规则树”，它告诉浏览器每个元素最终该应用哪些样式。

Render Tree

渲染树不是简单地把 DOM 原样复制一份，而是：

  • 只保留真正需要显示的内容
  • 把 DOM 结构和样式信息结合起来

例如设置了 display: none 的元素，通常不会进入最终渲染树。

Layout

布局阶段会计算：

  • 元素多宽、多高
  • 它在页面中的具体位置
  • 周围元素如何互相影响

这个阶段如果频繁触发，性能开销往往比较大。

Paint

绘制阶段会把元素真正“画出来”，例如：

  • 文字颜色
  • 背景色
  • 边框
  • 阴影
  • 图片

Composite

当页面中存在多个图层时，浏览器最后还要把这些图层组合起来，最终显示到屏幕上。

这也是为什么有些动画优化会强调“尽量使用 transform 和 opacity”，因为它们更容易利用合成阶段完成更新。

4.5 JavaScript 为什么可能阻塞页面

当浏览器解析 HTML 时，如果遇到下面这种代码：

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

浏览器通常会先暂停 HTML 解析，去下载并执行这个脚本，然后再继续往下解析页面。

原因是：JavaScript 可能会修改当前页面结构。如果不暂停，浏览器就可能基于“旧结构”渲染，结果出错。

这也是为什么在基础开发中，常常建议：

  • 把 <script> 放在 </body> 前
  • 或者使用 defer 属性

例如：

<script src="main.js" defer></script>

defer 表示脚本异步下载，但会等 HTML 解析完成后再执行。

4.6 回流与重绘为什么会影响性能

当页面已经渲染出来后，如果你再修改样式或结构，浏览器往往还要重新做部分工作。

最常见的两个概念是：

  • 回流（Reflow / Layout）：重新计算元素尺寸和位置
  • 重绘（Repaint / Paint）：重新绘制元素外观，但不一定重新计算布局

通常可以粗略理解为：

  • 改 width、height、margin、position，更容易触发回流
  • 改 color、background-color，更容易触发重绘

因为回流往往比重绘更重，所以性能优化里常常会强调：

  • 减少频繁读取和修改布局信息
  • 批量修改 DOM，而不是零碎多次修改
  • 避免在大列表中做过多同步布局计算

5. 为什么有些网页打开快，有些网页打开慢

网页速度的差异，本质上来自资源加载和浏览器渲染效率的差异。

5.1 资源太大

如果页面里有很多超大图片、视频或体积过大的 JS 文件，下载时间自然就更长。

例如：

  • 一张未压缩的大图可能有几 MB
  • 一个打包过大的脚本文件可能会拖慢首屏加载

5.2 请求太多

即使每个资源都不大，但如果一个页面包含大量 CSS、JS、图片、字体文件，也会造成很多次网络请求。

请求越多，等待时间通常越长。

5.3 阻塞资源太多

如果关键路径上存在大量同步脚本或必须先加载的样式文件，浏览器会在某些阶段停下来等待，页面就会显得更慢。

5.4 用户网络环境差

不同用户的网络环境并不一样：

  • 有人使用高速宽带
  • 有人使用移动网络
  • 有人处于高延迟环境

所以前端开发不能只在自己的电脑上看“感觉挺快”，而要考虑真实用户的访问情况。

6. 缓存机制入门

浏览器为了减少重复下载，会尽量缓存已经获取过的资源。这也是为什么很多网站第二次打开会明显更快。

6.1 什么是缓存

缓存可以理解为：

第一次访问时把资源保存一份，下一次如果资源没变，就尽量直接使用本地副本，而不是重新下载。

6.2 强缓存

如果服务器明确告诉浏览器，这个资源在一段时间内不会变，那么浏览器下次访问时可以直接使用本地缓存，甚至不发请求。

常见相关响应头有：

Cache-Control: max-age=3600

这表示资源在 3600 秒内都可以直接使用缓存。

6.3 协商缓存

有时浏览器仍然会向服务器确认一下资源有没有更新，但如果服务器判断资源没变，就返回：

304 Not Modified

这时浏览器继续使用本地缓存内容。

6.4 为什么前端要懂缓存

缓存会直接影响：

  • 页面打开速度
  • 用户流量消耗
  • 资源是否是最新版本

如果你明明改了 CSS，但浏览器还是显示旧样式，很多时候就是缓存导致的。

7. 开发中最常见的网络问题

理解浏览器与网络后，你会发现很多报错其实并不神秘。

7.1 404 Not Found

最常见原因：

  • 文件路径写错
  • 接口地址写错
  • 服务器上根本没有这个资源

7.2 请求成功了，但页面样式没生效

可能原因：

  • CSS 文件路径错误
  • CSS 文件虽然请求成功，但选择器没选中元素
  • 浏览器仍在使用旧缓存

7.3 接口请求很慢

可能原因：

  • 服务器处理慢
  • 数据量太大
  • 网络环境差
  • 同时发出的请求太多

7.4 HTTPS 页面里混入 HTTP 资源

如果你的页面本身是 HTTPS，但里面引用了 HTTP 图片、脚本或接口，浏览器可能会直接拦截，这种情况通常叫作 混合内容问题。

7.5 跨域问题

当前端页面请求的接口和当前页面不属于同一个源时，浏览器会触发同源策略限制。

例如：

  • 页面来自 https://www.a.com
  • 接口来自 https://api.b.com

这时候就可能涉及跨域配置（CORS）。

⚠️ 新手易错点： 跨域限制是浏览器的安全策略，不是前端代码本身“写错了”。

8. 用开发者工具看懂一次请求

学习浏览器与网络，不能只停留在概念层面，更要会看浏览器开发者工具。

在 Chrome、Edge 等浏览器中，按 F12 可以打开开发者工具，其中最重要的就是 Network 面板。

8.1 你能看到什么

在 Network 中，你通常可以看到：

  • 请求的资源名称
  • 请求方法（如 GET、POST）
  • 状态码（如 200、404）
  • 资源类型（如 document、stylesheet、script、img）
  • 文件大小
  • 请求耗时

8.2 它有什么用

当页面加载异常时，你可以立刻检查：

  • 是不是某个文件请求失败了
  • 是不是接口返回了错误状态码
  • 是不是图片太大导致加载过慢
  • 是不是缓存导致资源没有更新

对前端开发来说，Network 面板是定位问题的核心工具之一。

9. 这些知识和前端开发有什么关系

很多初学者会觉得：浏览器与网络是不是偏“底层”，和写页面关系不大？

其实恰恰相反，它和日常开发关系非常紧密。

9.1 为什么 <script> 放置位置会影响体验

因为脚本可能阻塞 HTML 解析，所以脚本位置和加载方式会直接影响首屏显示速度。

9.2 为什么图片不能乱传大图

因为图片本质上也要走网络请求，图片太大就会明显拖慢页面加载。

9.3 为什么接口调不通要先看状态码

状态码能快速告诉你问题是在：

  • 路径错误
  • 权限错误
  • 服务器异常
  • 缓存未更新

9.4 为什么学 fetch 之前要先懂 HTTP

因为 fetch 只是发请求的工具，而请求真正遵守的是 HTTP 规则。你不理解请求方法、请求头、状态码，就很难真正看懂接口通信。

10. 小结

一个网页从“输入网址”到“真正显示”，大致会经历以下流程：

  1. 用户输入 URL
  2. 浏览器解析 URL
  3. DNS 将域名解析成 IP
  4. 浏览器与服务器建立连接
  5. 浏览器发送 HTTP 请求
  6. 服务器返回 HTML
  7. 浏览器继续请求 CSS、JS、图片等资源
  8. 浏览器解析 HTML、CSS、JavaScript
  9. 页面被渲染出来，并具备交互能力

理解这条主线以后，你再回头看 HTML、CSS、JavaScript，就会发现它们不再是孤立的知识点，而是共同参与了网页从请求到渲染的完整过程。