一个网站是怎么被看到的？原理我嚼碎喂给你！

一句话：你在地址栏敲下回车，到网页出现在眼前，是你的电脑和一台远端电脑之间的一场接力赛——这篇把每一棒都拆开：地址怎么查、门怎么敲、单怎么点、服务器的柜台后面在忙什么、浏览器又怎么把一堆文件拼成画面。

这是原理篇：不教你买服务器、不敲安装命令，只讲"为什么能成"。全文用一个比喻打底——网站 = 一家店：服务器是店面，网页文件是货，Nginx 是店员，域名 + DNS 是门牌和导航。看完这篇，任何建站教程在你眼里都会变成"照着做就行"的流水账。

1. 先看全景：按下回车之后的0.3 秒里的六件事

朋友在微信里甩给你一个链接，你点开，页面出现。这不到一秒里，按顺序发生了六件事：

1. 查电话簿：把域名换成 IP 地址（DNS）
2. 敲门：和服务器建立可靠通道（TCP 三次握手）
3. 上锁：把通道加密（TLS 握手）
4. 点单：浏览器发出 HTTP 请求
5. 店员拿货：服务器收到、处理、返回 HTTP 响应
6. 摆盘：浏览器把收到的文件画成页面

本篇剩下的内容，就是把这张图逐帧放大。

2. 主角一：服务器到底是什么

把"服务器"这三层人设剥开看：

• 表面：机房里一台永不关机的电脑。没有显示器，扁扁的铁盒子，插着比我家家宽快几百倍的网线
• 中层：你租的"云服务器"，其实是别人机房那台大电脑上，用软件虚拟出来的一台小电脑（这叫虚拟化），分到固定份额的 CPU、内存、硬盘
• 本质：一个有固定门牌号、永远在线、专门等别人来敲门的电脑。

这里有三个绕不开的概念，一次讲清：

🔑 小知识：你家电脑理论上也能当服务器。不能当的原因很朴素：家庭宽带的门牌号（IP）经常换、上传带宽小得可怜、运营商默认拦外来的敲门。所以大家去租机房里的机器——图的是门牌固定、网线粗、不断电。

3. 主角二：网页到底是什么

一个网页，是三个文件演的一出戏：

外加图片、字体这些素材。就这些，没别的了。

两个关键认知，后面全要用：

• 它们就是服务器硬盘上的普通文件。你现在读的这篇文章，在到你眼前之前，就是对方服务器硬盘里的一个 .html 文件（或者一堆数据，见下一条）。
• 网页分"预制菜"和"现炒"两种。文件提前写好放在硬盘上、谁来都发同一份——这叫静态；服务器上的程序在你下单那一刻现做一份——这叫动态（WordPress 博客、淘宝全是）。但无论哪种，最后送进浏览器的都必须是同一道菜：一份 HTML。浏览器只认这一种。

4. 第一棒：查地址——DNS 分层电话簿

浏览器拿到 wumist.top 没法直接用——数据包上路得写具体门牌号（IP），域名只是给人看的。所以第一步是把域名翻译成 IP，干这事的是 DNS。

先拆一下你天天输的网址，每个零件都有名字：

https:// blog.wumist.top :443 /post/dshjc ?from=weixin

翻译过程是一场自上而下的查户口。你的电脑先翻自己的小本本，没有就一路问上去，全世界的地址簿分了层级：

1. 浏览器自己的小本本：最近查过的记在这（缓存）
2. 你电脑里的 hosts 文件：一本手写通讯录，可以人为指定"某域名 = 某 IP"
3. 运营商的递归 DNS：接线员。你只问它一次，剩下的事它替你跑腿
4. 接线员从根域名服务器问起（全球共 13 组，互联网的祖宗级电话簿）。根不存具体地址，只指路：".top 结尾的？去找 .top 的权威 DNS"
5. 权威 DNS里躺着店主自己登记的那条 A 记录："wumist.top = 123.45.67.89"。答案原路返回，沿途人人都抄一份到自己的小本本上（这就是缓存，抄多久由记录上的 TTL 说了算）

🔑 小知识：A 记录和 CNAME 记录。A 是"域名 → IP"；CNAME 是"域名 → 另一个域名"，套一层娃，常见于挂 CDN 的网站（自己不报地址，说"去问 CDN 家的权威"）。

💡 这一层解释了两个日常现象：第二次打开同一个网站快得多——沿途小本本都抄过了；改了域名解析不是立刻生效——别人的小本本还没过保质期，仍按旧地址走。

5. 第二棒：敲门——TCP 三次握手

IP 到手，浏览器开始往 123.45.67.89 的 443 号房间寄包裹。但正式传数据前，双方要先建立一条"可靠通道"，这个协议叫 TCP。

• TCP 的本质是可靠投递：每个包裹编号、接收方逐个签收、丢件自动重发。像挂号信，而不是塞邮筒就不管的普通信。你网页上一个字都不会丢，靠的就是它
• 建通道要先"对暗号"，一共三轮，术语叫三次握手：

1. 浏览器 → 服务器：SYN（"喂，我想连 443 房间，能听到吗？"）
2. 服务器 → 浏览器：SYN + ACK（"能听到！你也还在吗？"）

3. 浏览器 → 服务器：ACK（"在！开始说话。"）

4. 为什么非要三次？双方都要确认两件事："我发的对方收到了""对方发的我收到了"。两次不够——服务器不知道自己那句对方收到没；四次浪费。三次刚刚好。

🔑 顺手破一个案："网站打不开，一直转圈圈"病根在这一棒——你的敲门（SYN）发出去石沉大海：可能房间门没开（端口没放行）、大厦保安拦了（防火墙）、或者整栋楼停电了（服务器宕机）。而在第一棒就失败的话，报的是"找不到服务器/DNS 错误"。症状不同，病根在不同棒，这就是原理的价值。

6. 第三棒：上锁——TLS 与 HTTPS 证书

通道建好了，但目前是明文的——像寄明信片，沿途每个邮差都能看、都能改。HTTPS = HTTP + TLS，在刚建好的通道里再加一层加密。这一步叫 TLS 握手，要解决一个死结：

两个素不相识的人，怎么当着旁人的面商量密码？（如果直接明文说"我们用 123456 当钥匙吧"，偷听的人也听见了，白搭。）

解法是两种加密方式配合用：

• 非对称加密——用来安全地换钥匙。服务器有一对钥匙：公钥（一把谁都可以复印的锁，锁上的箱子只有配套钥匙能开）和私钥（配套钥匙，只留在服务器手里，永远不出门）。握手时，浏览器用公钥把"进门暗号"锁进箱子寄过去——全程谁都能看见这个箱子，但谁也打不开
• 对称加密——用来真正传数据。双方拿到相同暗号后，改用同一把钥匙加解密。对称加密比非对称快几十倍，所以整个设计是：慢的方式换钥匙，快的方式干活

那问题又来了：凭什么信这把公钥真是 wumist.top 的？万一快递公钥的人是骗子呢？这就是证书的用处——CA（证书颁发机构，互联网的公证处）核实"这个域名确实是这个人在运营"之后，用自己的名义给公钥盖个章。而你的浏览器出厂时就内置了一批它信任的 CA 名单，收到证书时逐级验章，章对得上才放行。这就是所谓的证书链。

地址栏那把 🔒 小锁的含义：你们的通道加密了（防偷看） + 对方的身份被公证过了（防冒充）。

7. 第四棒：点单与上菜——HTTP 报文

通道上锁完毕，浏览器终于递上真正的订单——HTTP 请求。它其实就是一张纯文本的小纸条：

GET /post/dshjc HTTP/1.1
Host: blog.wumist.top
User-Agent: Mozilla/5.0 (Windows NT 10.0) ...
Cookie: token=abc123

服务器的回单——HTTP 响应——同样是纯文本：

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1832

<!DOCTYPE html>
<html>……（HTML 正文，就是网页文件本身）……

状态码就是回单上的结论，五个最常见的：

🔑 小知识：HTTP 是"失忆"的——无状态。服务器对每个请求都当新客处理，完全不记得你上一单干了什么。那网站怎么"记得你登录过"？靠会员卡：服务器在响应里塞一张卡（Set-Cookie），你的浏览器存下来，之后每次请求自动附上（就是上面的 Cookie 行）。所谓"登录状态"，就是一张卡。

8. 第五棒：柜台后面——服务器到底做了什么

重头戏来了。那个轻描淡写的"200 OK"背后，服务器内部是一条流水线，六个站点：

第 1 站：网卡收包。网线上的电信号到达网卡，被转成一串 0 和 1。这是所有一切的物理起点。

第 2 站：内核前台拆信封。操作系统内核像大厦前台，把包裹逐层拆信封：最外层以太网信封（送到本楼哪台机器）→ 里面IP 信封（核对门牌号是不是我家）→ 再里面 TCP 信封（写着"443 房间收"）→ 最里面，才是那张 HTTP 小纸条。这个"层层套信封、层层拆信封"就是网络分层的本质——寄件的时候每过一站套一层，收件的时候每过一站拆一层。

第 3 站：按房间号排号。内核查"监听表"：443 号房间登记入住的是 Nginx 进程（它开机就搬进来，一直守着这个房间）。内核把这条新连接放进该房间的排队叫号机（连接队列），然后敲醒 Nginx："来客了。"

第 4 站：Nginx 的独门功夫——一个店员盯全场。传统做法是每来一位客人就雇一个新店员（一个连接配一个进程/线程），客人一多，店先被自己的员工挤爆。Nginx 不这么干：它用 Linux 提供的 epoll 机制——想象一整面墙的门铃接在一块总控表上——一个店员坐在总控台前，谁的铃响去服务谁。这就是它能用很小的内存扛住几万人同时访问的原因。

第 5 站：翻手册、拿货。Nginx 拿着订单翻配置手册：先看 Host（进哪家店——一台服务器开 N 家店就是靠它分流）→ 再用路径匹配规则（哪个 location）→ 规则指向 root 目录，去那里拿货。到这里，静态和动态网站分道扬镳：

• 静态剧本（预制菜）：文件就躺在硬盘上。Nginx 先看柜台底下有没有上次留下的样品（页缓存——操作系统会把最近读过的文件留在内存里），有就直接发；没有才去硬盘读。更讲究的还有 sendfile：文件从硬盘直达网卡，连"经过店员手里"这一步都省了。个人主页、文档站、Hexo/Hugo 生成的博客都是这类——谁来、何时来，发的都是同一份文件
• 动态剧本（现炒）：Nginx 自己不做饭，把订单转给后端程序（PHP、Node、Python 写的应用）。后端去数据库里查数据——注意，你看的文章内容其实存在数据库里，根本不在什么 HTML 文件里——查出来套进模板，现场拼出一份 HTML，交回 Nginx 发给你。你每看一篇 WordPress 的文章，都是下单那一刻现做的。登录、评论、推荐"猜你喜欢"，全是这个剧本

第 6 站：顺手记账。每单处理完，Nginx 往 access.log 写一行：几点几分、哪个 IP、要了什么路径、回了什么状态码、花了多少毫秒。你后来在统计后台看到的"今日访客 327"，源头就是这类日志。

⚠️ 把第 7 节那几个错误码放回流水线上，全对得上号：404 = 第 5 站按路径没找到货；500 = 动态剧本里后端程序自己抛了异常；502 = 后端进程压根没应答（崩了）；504 = 后端算得太慢，Nginx 等不及先撤了。

9. 第六棒：浏览器怎么把文件拼成画面

HTML 文件到手，最后一棒开始。浏览器不是等全部下载完才动手，而是一边下载一边解析，跑一条流水线：

1. 解析 HTML → DOM 树：把说明书整理成一棵家谱——<html> 是祖宗，<body> 是儿子，标题、段落、图片是孙子。这棵树从此就是页面在浏览器里的"真身"，你按 F12 看到的就是它
2. 解析 CSS → CSSOM 树：化妆手册也整理成树
3. 两树合成"渲染树"：每个节点对上号——"谁、长什么样"
4. Layout（布局）：算出每个元素的屏幕位置和大小（谁在哪、占多宽多高）
5. Paint（绘制）：把算好的结果真正画成像素
6. Composite（合成）：页面被分成若干层，分别画好后拼贴上屏（滚动、动画很多只动一层，就非常流畅）

🔑 两个日常现象在这条流水线上有精确解释：

• 装了个慢的 JS 脚本，页面白屏：流水线走到 <script> 默认要停下，等它下载 + 执行完才敢继续——因为 JS 可能当场改家谱（插入、删掉节点），先画了也是白画
• 图片把页面挤得跳一下：图片文件没加载完时不知道尺寸，Layout 算不了它的高度，图一到就得整个重新布局（重排 reflow，比改改颜色就重画的"重绘 repaint"贵得多）

💡 为什么第二次打开同一个网站快得像秒开？因为缓存插在流水线的各个入口：DNS 小本本还在保质期（第 4 节）、浏览器本地还有整份文件且没过期（强缓存，连请求都不发）、过期了就问一嘴"我这份还能用吗"，没变的话服务器只回一张 304 空单（协商缓存），文件本身不用重传。三层缓存，一层比一层省。

10. 用原理看懂日常现象

11. 收尾

到这里，"上网"这两个字在你脑子里应该已经从一句黑话变成了一条流水线：电信号 → 数据包 → 查电话簿 → 敲门 → 上锁 → 点单 → 柜台后面六站 → 解析 → 布局 → 绘制 → 上屏。每一棒各自都是一个发展了三十年的领域（DNS、TCP、TLS、HTTP、Web 服务器、渲染引擎），但作为使用者，知道每棒"在干嘛、坏了是什么症状"，就已经超过了绝大多数人。

💬 下一篇如果你要动手——买服务器、装 Nginx、挂域名、上 HTTPS——会发现每个操作步骤正好一一落在这条流水线的某一棒上。到那时你看着教程会有种"哦，不过是把原理里讲过的东西摆到位"的感觉。原理在手，教程照抄。这也是先讲原理再讲操作的原因：操作会过时（工具年年换），原理二十年没大变过。

延伸资料（都是权威一手，看不懂中文版时可对照）：

• HTTP 协议全景：MDN《HTTP 概述》 — https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview
• 浏览器工作原理（经典长文，本文第 9 节的深水区）：《How Browsers Work》 — https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work
• TLS 握手图解：Cloudflare《What is TLS?》 — https://www.cloudflare.com/zh-cn/learning/ssl/transport-layer-security-tls/