网站的工作原理

万维网是如何运转的？——从 HTTP 到浏览器渲染的完整解析

一、引言¶

引子

你打开一个网页时，背后发生了什么？

当你在浏览器地址栏输入：

https://docs.qsnctf.com

然后按下回车，看似只是“页面出现了”，但在这短短几秒内，其实发生了一整套复杂的网络交互：

浏览器解析域名 → 找到服务器
浏览器向服务器发送 HTTP 请求
服务器处理请求并返回 HTML
浏览器下载资源（CSS、JS、图片）
浏览器解析 HTML 并渲染页面

这一切的基础，建立在**HTTP 协议 + 客户端/服务器模型 + Web 服务器软件（如 Apache/Nginx）+ 浏览器渲染引擎**之上。

接下来，我们逐层拆解。

二、HTTP 协议¶

HTTP协议

网页通信的“共同语言”

1. 什么是 HTTP？¶

HTTP（HyperText Transfer Protocol，超文本传输协议） 是一种用于在客户端（浏览器）和服务器之间传输网页数据的协议。

你可以把 HTTP 想象成：

📦 快递规则：

浏览器 = 你（收件人）

服务器 = 商家（发货人）

HTTP = 快递流程和格式标准

2. HTTP 的基本工作流程¶

当你访问一个网页时，大致流程是：

第一步：浏览器发送请求（Request）¶

浏览器向服务器发送类似这样的请求：

GET /index.html HTTP/1.1
Host: www.example.com

这相当于在说：

“你好服务器，我想要你网站根目录下的 index.html 页面。”

第二步：服务器返回响应（Response）¶

服务器会返回类似：

HTTP/1.1 200 OK
Content-Type: text/html

<html>
  <head>...</head>
  <body>你好，世界！</body>
</html>

浏览器拿到这些 HTML 文本后，开始解析并展示页面。

HTTP vs HTTPS¶

HTTP = 明文传输（不安全）
HTTPS = 加密传输（更安全）

现在大多数网站都使用 HTTPS：

https://docs.qsnctf.com

HTTPS = HTTP + SSL/TLS 加密。

三、客户端/服务器模型（Client-Server Model）¶

Web 世界基于**客户端/服务器架构**：

角色	作用
客户端（Client）	浏览器：Chrome、Safari、Edge
服务器（Server）	存网页的计算机，如 Web 服务器
协议	HTTP/HTTPS 负责通信

工作模式：¶

客户端发请求
服务器处理请求
服务器返回数据
客户端渲染页面

这就是现代互联网的基础架构。

四、Web 服务器：Apache 和 Nginx 是什么？¶

当浏览器请求一个网站时，并不是“直接访问文件”，而是先经过一个**Web 服务器软件**。

常见的有：

Apache
Nginx

1. Apache¶

Apache 是历史悠久的 Web 服务器，特点：

配置灵活
支持模块多
适合传统 Web 站点

典型用途：

博客
PHP 网站
WordPress

2. Nginx¶

Nginx 更现代、更轻量，特点：

高并发性能强
适合大流量网站
常用于：
反向代理
负载均衡
API 服务

很多大型网站（如淘宝、知乎、抖音后端部分）都使用 Nginx。

3. 中间件的作用（简化理解）¶

你可以这样理解：

浏览器 → Nginx/Apache（门卫） → 服务器程序 → 数据库

Web 服务器就像**网站门口的保安**：

负责接收请求
决定交给谁处理
返回最终结果

五、网站的整体工作原理¶

完整流程如下：

用户输入网址
DNS 解析域名 → 找到服务器 IP
浏览器发送 HTTP 请求
Nginx/Apache 接收请求
服务器程序（如 Node.js / PHP / Python）处理逻辑
服务器返回 HTML
浏览器下载页面 + CSS + JS + 图片
浏览器渲染页面

最终你看到的是一个漂亮的网站。

六、为什么浏览器能显示网页？¶

因为浏览器内置了**渲染引擎**，比如：

浏览器	渲染引擎
Chrome	Blink
Safari	WebKit
Firefox	Gecko
Edge	Blink

浏览器的核心能力：

解析 HTML
解析 CSS
运行 JavaScript
绘制页面

七、没有浏览器时，网页是什么样的？¶

如果你**直接打开 HTML 文件**（不用浏览器），你会看到类似这样：

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎访问</h1>
  <p>这是一个网页</p>
</body>
</html>

👉 这就是网页的**原始形态**： 👉 一堆结构化的文本 + 标签

没有浏览器，它只是普通文本文件。

浏览器的作用就是：

把这些“带标签的文本”变成可视化页面。

八、浏览器是如何渲染 HTML 的？¶

这是最核心的一步，我们拆解成 5 步：

第一步：解析 HTML，构建 DOM 树¶

浏览器把 HTML 转成树结构：

<html>
 ├── head
 └── body
     ├── h1
     └── p

这叫 DOM（Document Object Model）。

第二步：解析 CSS，构建 CSSOM¶

浏览器读取 CSS，形成样式规则树。

第三步：合并 DOM + CSSOM → 渲染树¶

浏览器决定：

哪些元素可见
颜色
大小
位置

第四步：布局（Layout）¶

计算每个元素的位置，比如：

标题在顶部
段落在下面

第五步：绘制（Painting）¶

最终把内容画到屏幕上，你就看到网页了。

九、总结¶

flowchart TD
A[用户输入网址] --> B[DNS 解析域名]
B --> C[获得服务器 IP]
C --> D[浏览器发送 HTTP/HTTPS 请求]
D --> E[Nginx / Apache 处理请求]
E --> F[后端服务器执行业务]
F --> G[服务器返回 HTML + 资源]
G --> H[浏览器解析 HTML/CSS/JS]
H --> I[构建 DOM → 渲染树 → 布局 → 绘制]
I --> J[用户看到网页]