简述web工作原理

你在地铁里刷手机，简述点开一个链接，作原半秒不到，简述一张猫图就蹦了出来。作原这中间发生了什么？简述很多人会说“上网呗”，但要是作原把这条链路拆开，细节还挺有意思。简述

先从你手头这台设备说起。作原你输入一个网址，简述比如 example.com，作原浏览器其实并不知道这个域名背后是简述哪台机器。它得先去找 DNS 服务器问一嘴：“example.com 对应的作原 IP 是多少？”DNS 就像互联网的通讯录，只不过它不存人名，简述存的作原是域名和 IP 的映射。这个过程通常几十毫秒，简述快到你根本感觉不到。拿到 IP 之后，浏览器才真正开始干活。

接下来是 TCP 握手。浏览器和服务器之间要建立一条可靠的连接，三次握手——你发个 SYN，服务器回个 SYN-ACK，你再回个 ACK。听起来啰嗦，但这是保证数据不丢不乱的基础。如果是 HTTPS，还要再多几步 TLS 握手，交换密钥、验证证书。你看到地址栏那个小锁图标，背后就是这些密码学操作在撑着。我有时候觉得，每次打开网页都像在搞一次微型外交谈判，双方先确认身份、再约定暗号，然后才开始传内容。

连接建好了，浏览器发出 HTTP 请求。这个请求里包含方法（GET、POST 之类）、路径、头部信息。比如你访问首页，请求行就是 GET / HTTP/1.1，后面跟着一堆 Host、User-Agent、Accept 之类的头。服务器收到后，开始处理。它可能去查数据库、读文件、调其他服务，然后拼出一个 HTTP 响应。响应里也有头部，比如 Content-Type: text/html，告诉浏览器“我发给你的是 HTML”。状态码 200 表示一切正常，404 就是没找到，500 是服务器自己崩了。

浏览器拿到 HTML 后，开始解析。它一边读一边构建 DOM 树，遇到 <link> 就去下载 CSS，遇到 <script> 就去下载或执行 JS。这里有个细节：CSS 和 JS 的加载会阻塞渲染，所以现代网页经常把脚本放底部或者加 async、defer。我见过不少新手把 <script> 塞在 <head> 里，结果页面白屏好几秒，用户早跑了。DOM 和 CSSOM 合在一起变成渲染树，然后布局、绘制，最后你看到画面。整个过程，从 DNS 到像素，通常不到一秒。

但故事没完。页面上的图片、字体、API 数据，都是后续的 HTTP 请求。一个普通新闻网站，加载完整可能发出上百个请求。HTTP/1.1 时代，浏览器对同一域名并发连接数有限制，所以大家搞域名分片、雪碧图。现在 HTTP/2 多路复用解决了这个问题，一个连接上跑几十个请求也不打架。我自己的博客从 HTTP/1.1 换到 HTTP/2 后，首屏时间大概少了 30%，感受很明显。

服务器那边也不轻松。它要处理并发、缓存、负载均衡。你请求的 example.com 背后可能是一台 Nginx 反向代理，再把请求转发给后端的 Node.js 或 Go 服务。静态资源走 CDN，动态接口走应用服务器。数据库查询要加索引，不然一个慢查询能把整个页面拖垮。这些工程细节，普通用户看不见，但决定了你刷网页是丝滑还是卡顿。

还有一个常被忽略的角色：代理和缓存。你公司的网络可能有个透明代理，你家的路由器可能缓存了 DNS，浏览器自己也有缓存。有时候你改了代码刷新页面没变化，就是缓存没清。按 Ctrl+F5 强制刷新，浏览器会跳过缓存重新请求。这个操作我每天至少用五次。

Web 的工作原理，说到底就是一套请求-响应模型，加上一堆为了速度、安全、可靠性而生的补丁。它不完美——TCP 慢启动、队头阻塞、DNS 污染，问题一堆。但正是这些层层叠叠的协议和优化，让你能在地铁里半秒看到猫图。下次页面加载慢的时候，你可以打开开发者工具的 Network 面板，看看时间到底花在哪了。那里面藏着的，就是 web 最真实的呼吸。