一句话总结
读完这篇文章，你会用大白话说清楚「输入网址敲回车」之后到底发生了什么，不再觉得互联网是个黑盒子。
先看这张图
想象你在浏览器里输入 jscodes.cn 然后敲回车。
从这一刻开始，你的电脑在 0.3 秒内悄悄做完了这五件事：
全过程不到 0.3 秒。比你眨一次眼还快 😉
这五个步骤，用生活比喻讲清楚
Step 1 & 2：DNS = 互联网的电话本
问题：浏览器只认识数字地址（IP），你只记得名字（域名）。
DNS（域名系统）就是这个「电话本」。
就像你想给朋友打电话，只知道他叫"张三"，不知道他的号码。你翻开手机通讯录查"张三"→ 找到号码 138xxxx → 拨号。
DNS 做的事一模一样：
- 你输入
jscodes.cn - DNS 服务器翻它的"通讯录"
- 告诉你："jscodes.cn 的 IP 地址是
1.2.3.4" - 浏览器拿到 IP，开始去敲门
💡 补充：为什么需要 DNS？因为 IP 地址太难记了。你能记住
76.76.21.21吗？但jscodes.cn你看一遍就记住了。
Step 3 & 4：浏览器和服务器在「打电话」
这部分的专业术语叫 HTTP 请求和响应。不用怕，用吃饭点餐来理解：
| 生活场景 | 网页场景 |
|---|---|
| 你走进餐厅 | 浏览器连上服务器 |
| 你看菜单 | 浏览器说「我要 index.html 这个文件」 |
| 服务员下单 | HTTP 请求发送到服务器 |
| 厨房做菜 | 服务器读取文件、查数据库 |
| 菜端上桌 | 服务器返回 HTML 页面 |
浏览器就是一个不停点菜的人，服务器是不停做菜的厨房。
每次你点一个链接、加载一张图片，都是发起一个"请求"。服务器回应一个"响应"。
Step 5：浏览器渲染 = 把乐高说明书拼成成品
服务器返回的东西是这样的：
<!DOCTYPE html>
<html>
<head><title>JsCodes</title></head>
<body>
<h1>欢迎来到 JsCodes</h1>
<p>让 AI 帮你写代码</p>
</body>
</html>
这不是你看得懂的页面，而是一堆「标签」。浏览器的工作就是把这堆标签翻译成你眼睛能看懂的样式：
<h1>翻译成超大加粗标题<p>翻译成一个段落<img src="...">翻译成一张图
就像你买了一套乐高，盒子里是零件和说明书。浏览器就是那个照着说明书搭乐高的人。
这个翻译过程，专业术语叫渲染。
一个真实例子：打开 jscodes.cn 的完整旅程
假设你手机连着 Wi-Fi，在浏览器输入 jscodes.cn：
| 步骤 | 发生了什么 | 耗时 |
|---|---|---|
| ① DNS 查询 | 浏览器问路由器："jscodes.cn 在哪？"→ 路由器问运营商的 DNS → 返回 IP | ~50ms |
| ② TCP 连接 | 浏览器和服务器"握手"确认能通信（三次握手） | ~30ms |
| ③ TLS 加密 | 如果网站是 HTTPS（带小锁），额外握手建立加密通道 | ~60ms |
| ④ HTTP 请求 | 浏览器发送 GET / HTTP/1.1，说"给我首页" | ~10ms |
| ⑤ 服务器处理 | 服务器找到首页 HTML 文件，准备返回 | ~20ms |
| ⑥ 下载 HTML | HTML 文本从服务器传到你的手机 | ~50ms |
| ⑦ 浏览器渲染 | 解析 HTML → 构建页面 → 显示 | ~80ms |
合计：约 0.3 秒（300ms）
常见问题
为什么有时候网页很慢？
上面 7 个步骤中，任何一步慢了都会影响速度：
- DNS 慢：你用的 DNS 服务器反应慢（可以手动换成公共 DNS：如 114.114.114.114）
- 服务器慢：网站服务器在国外，跨越大洋延迟高
- HTML 太大：页面内容太多，下载时间长
- 图片太多：每张图都是单独的请求，加起来就慢了
HTTP 和 HTTPS 的区别？
HTTPS 比 HTTP 多了一层加密（就是那个小锁 🔒）。
就像快递：HTTP 是普通快递（任何人都能拆开看），HTTPS 是加了密码锁的快递（只有收件人能打开）。
现在的网站基本都用 HTTPS，包括 jscodes.cn。
我学 AI 编程需要理解这些吗？
纯用 AI 写代码，不需要完全理解。AI 会帮你处理。
但是，当你遇到"部署了怎么打不开"、"域名怎么绑"这些问题时，这些基础知识会让你三秒定位问题，而不是一脸懵。
知道大概在哪个环节出问题，就超过了 90% 的小白。
动手试试
打开浏览器的开发者工具（按 F12 或右键 → 检查），切到 Network（网络） 标签页。
刷新 jscodes.cn 页面，观察：
- 第一个请求是什么？（就是 HTML 页面）
- 总共加载了多少个请求？
- 哪个请求最慢？
你会亲眼看到上面说的每一步，以数据和瀑布图的形式展示在眼前。
下一步
搞懂了网页怎么跑的，接下来看看「前端」和「后端」到底是什么：
或者，如果你更关心工具选择：