网站的运作流程

你在浏览器地址栏敲下几个字，网站按下回车，作流不到一秒，网站一个页面就铺在眼前。作流这背后跑完的网站流程，比外卖从下单到送达还复杂，作流只是网站它快到你根本来不及想。

先说你那一下回车。作流浏览器干的网站头一件事，是作流把这个网址翻译成IP地址。域名是网站给人看的，机器只认数字。作流它去问DNS服务器，网站DNS就像一本巨大的作流电话簿，告诉你“这个域名对应的网站是哪台机器”。这一步通常几十毫秒，你察觉不到，但如果DNS挂了，你会看到“找不到服务器”——那不是网站死了，是电话簿丢了。

拿到IP，浏览器跟那台服务器建立TCP连接。三次握手，你发一个SYN，它回SYN+ACK，你再回ACK。听着像暗号，其实就是确认双方都能收发。如果是HTTPS，还要再加一层TLS握手，交换密钥、验证证书。这一步比TCP慢，因为多了加密协商。你看到地址栏那个小锁图标，就是TLS握手成功的标志。

连接建好，浏览器发HTTP请求。请求里带着你要什么页面、接受什么格式、带没带cookie。服务器收到后，开始干活。静态页面简单，直接把HTML文件读出来扔回去。动态页面就麻烦了，后端代码要查数据库、算逻辑、拼模板。比如你刷微博，服务器得先查你关注了谁，再拉他们的最新帖子，按时间排好，最后渲染成HTML。这一套下来，几十毫秒到几秒不等，取决于数据库快不快、代码写得烂不烂。

服务器把响应发回来，浏览器开始解析HTML。它一边读一边构建DOM树，遇到CSS就下载，遇到JS就执行。这里有个坑：JS默认会阻塞解析。如果脚本放在头部且没加async或defer，浏览器得等它下载并执行完，才继续往下读HTML。所以很多网站把JS放底部，或者用异步加载。CSS不阻塞解析，但阻塞渲染——浏览器得等CSSOM建好，才敢画第一帧。不然页面会闪一下没样式的裸HTML，那体验很糟糕。

DOM和CSSOM都好了，合并成渲染树。然后布局，算每个元素在屏幕上的位置和大小。接着绘制，把颜色、边框、阴影画出来。最后合成，把各层拼成最终画面。这个过程叫关键渲染路径，优化它就是优化首屏速度。你感觉“快”，往往不是服务器快，而是浏览器渲染策略好。

页面显示出来还没完。JS继续跑，可能发Ajax请求拉新数据，可能监听你的点击。你滚动页面，触发懒加载图片；你点按钮，触发事件处理。这些都在客户端完成，服务器不参与。所以有时候你断网了，页面还能操作一会儿，因为逻辑在本地。

整个流程里，DNS、TCP、TLS、HTTP、渲染，每一环都可能出问题。DNS污染、TCP丢包、TLS证书过期、HTTP 404、渲染阻塞——任何一个环节卡住，你看到的就不是页面，而是错误码或白屏。运维和前端工程师每天干的，就是让这些环节少出岔子。

我见过一个案例：某电商大促，首页加载从1.2秒突然涨到8秒。查了半天，发现是CDN回源了，因为缓存过期策略配错了。用户每访问一次，CDN就去源站拉一次图片。源站带宽被拉满，响应变慢，CDN等不及超时，又重试。恶性循环。最后改了一行缓存头，恢复如初。你看，网站运作没那么神秘，但细节能要命。

下一次你打开网页，可以想想这背后跑完的几百毫秒里，有多少台机器、多少行代码在为你服务。它不完美，但确实挺了不起。