一张图看懂，你打开网页的0.3秒发生了什么

读完这篇文章，你能用大白话说清楚「输入网址敲回车」之后到底发生了什么，不再觉得互联网是个黑盒子。

先说最本质的一句话

网页加载，说到底就是一件事——你的电脑，从另一台电脑那里，要了一个文件，然后显示出来。

互联网的本质就是两台电脑传文件

就这么简单。所有花哨的技术名词，DNS、HTTP、TCP、TLS，都是在为这一件事服务。记住这个本质，后面的每一步都好理解。

你的电脑叫客户端，那台放文件的电脑叫服务器。中间的传输通道就是互联网。

从输入网址到看到页面，一共五步

想象你在浏览器里输入 jscodes.cn 然后敲回车。从这一刻开始，你的电脑在 0.3 秒内做完了这五件事。

网页加载五步流程图

全程不到 0.3 秒，比你眨一次眼还快。下面逐步拆解。

第一步，DNS 查询——先搞清楚对方在哪

你的电脑知道你想访问 jscodes.cn，但它不知道这个名字对应哪台电脑。

这就像你知道朋友叫"张三"，但不知道他住哪。你得先查通讯录。

DNS（域名系统）就是互联网的通讯录。你的电脑问 DNS 服务器，"jscodes.cn 在哪？"，DNS 回答 "IP 地址是 1.2.3.4，在那边。"

为什么需要 DNS？因为 IP 地址（比如 76.76.21.21）对人来说太难记了，但 jscodes.cn 你看一遍就记住。DNS 就是"名字→地址"的翻译官。

第二步，TCP 连接——跟对方搭上线

知道了地址，下一步是走过去敲门。

TCP（传输控制协议）就是敲门的规则。你的电脑向服务器发起连接请求，服务器回应"来了来了，门开着"，双方确认能互相通信。

这个过程专业上叫"三次握手"——你说"在吗"，对方说"在，你还在吗"，你说"我也在"，然后开始聊。很礼貌，但很快，大约 30 毫秒。

第三步，TLS 加密——给通道上把锁

如果网址开头是 https://（注意那个 s，代表 secure），你的电脑会在 TCP 连接之上再加一层加密。

这步叫 TLS 握手。简单说，就是双方约定一个只有你俩知道的"暗号"，之后所有传过来的内容都加密，别人半路截获了也看不懂。

这就是浏览器地址栏那把小锁的含义——你和服务器的通信是加密的。

如果网址是 http://（没有 s），就没有这步，传输是明文的。现在绝大多数网站都走 HTTPS，包括 jscodes.cn。

第四步，HTTP 请求——正式开口要东西

通道搭好了，接下来就是说正事。

你的电脑发一条消息给服务器，大概意思是，"给我 jscodes.cn 首页的 HTML 文件。" 这条消息就是 HTTP 请求。

用餐厅点菜来类比最形象——

HTTP 请求就像在餐厅点菜

浏览器是顾客，服务器是厨房。你说"我要一份 index.html"，厨房收到订单后开始做菜（读取文件、查数据库），做好了端上桌（返回 HTML 给浏览器）。

每次你点一个链接、加载一张图片，都是发起一次新的"点菜"。浏览器就是个不停点菜的顾客，服务器是不停做菜的厨房。

第五步，浏览器渲染——把代码变成你看得懂的页面

服务器返回的 HTML 长这样——

HTML

<!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——

步骤	发生了什么	耗时
1 DNS 查询	浏览器问"jscodes.cn 在哪？"，DNS 返回 IP 地址	~50ms
2 TCP 连接	浏览器和服务器握手确认能通信	~30ms
3 TLS 加密	建立 HTTPS 加密通道	~60ms
4 HTTP 请求	浏览器说"给我首页"	~10ms
5 服务器处理	服务器找到 HTML 文件，准备返回	~20ms
6 下载 HTML	HTML 文本从服务器传到你的手机	~50ms
7 浏览器渲染	解析 HTML，构建页面，显示	~80ms

合计约 300ms，也就是 0.3 秒。

常见问题

为什么有时候网页很慢？

上面 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 页面）
总共加载了多少个请求？
哪个请求最慢？

你会亲眼看到上面说的每一步，以数据和瀑布图的形式展示在眼前。

下一步

搞懂了网页怎么跑的，接下来看看「前端」和「后端」到底是什么——