网站的运作流程
你在浏览器地址栏敲下几个字,网站按下回车,作流不到一秒,网站一个页面就铺在眼前。作流这背后跑完的网站流程,比外卖从下单到送达还复杂,作流只是网站它快到你根本来不及想。
先说你那一下回车。作流浏览器干的网站头一件事,是作流把这个网址翻译成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等不及超时,又重试。恶性循环。最后改了一行缓存头,恢复如初。你看,网站运作没那么神秘,但细节能要命。
下一次你打开网页,可以想想这背后跑完的几百毫秒里,有多少台机器、多少行代码在为你服务。它不完美,但确实挺了不起。