网站流程

用户点开一个网页，网站流程服务器在几百毫秒内完成了一连串动作。网站流程这个过程没有魔法，网站流程全是网站流程流程。

浏览器先看缓存。网站流程如果本地存过这个页面且没过期，网站流程直接渲染，网站流程连请求都不发。网站流程没缓存，网站流程或者缓存过期了，网站流程才向服务器发起 HTTP 请求。网站流程请求里带着 URL、网站流程请求头、网站流程Cookie，网站流程有时候还有 POST 数据。网站流程这一步走的是 DNS 解析——把域名变成 IP 地址。DNS 查询本身也可能命中缓存：浏览器缓存、操作系统缓存、路由器缓存，逐级往上，最后才问到根域名服务器。整个链条设计得挺聪明，每一层都尽量减少向上查询的次数。

拿到 IP 之后，TCP 三次握手建立连接。如果是 HTTPS，还要再来一轮 TLS 握手，交换密钥、验证证书。这两步加起来，在慢网络下能吃掉一两秒。我见过不少网站，首页本身不重，但 TLS 配置有问题，握手阶段就卡住了。用 curl -w 打时间戳一看，DNS 和 TLS 占了大头，后端反而很快。

请求到达服务器。Nginx 或 Apache 先接住，根据配置文件决定转发给谁。静态文件直接读磁盘返回，动态请求交给后端应用——PHP、Node.js、Python、Java，看技术栈。后端代码开始跑业务逻辑：查数据库、调外部 API、拼模板。数据库查询往往是瓶颈。一条没加索引的 SQL 在千万级表上跑几秒，用户那边就是白屏。加索引、加缓存、读写分离，都是在这个环节做文章。

后端生成 HTML 或者 JSON 返回。如果是前后端分离的站点，返回 JSON，浏览器拿到后再用 JavaScript 渲染页面。这一步又多了几个网络往返：先加载 JS 框架，再发 AJAX 请求拿数据，再渲染。首屏时间因此拉长。服务端渲染（SSR）解决的就是这个问题，把渲染放回服务器，浏览器拿到的是完整 HTML。

响应沿着原路返回。经过 CDN 节点时，CDN 可能缓存一份。下次别的用户请求同一个资源，直接从边缘节点返回，不用回源。CDN 的命中率直接影响用户体验。我观察过一个小型电商站，接入 CDN 后，商品详情页的加载时间从 2.3 秒降到 0.8 秒，回源带宽掉了七成。

浏览器收到响应，开始解析 HTML。遇到 <link> 标签加载 CSS，遇到 <script> 加载 JS。CSS 阻塞渲染，JS 阻塞解析。所以通常把 CSS 放头部，JS 放底部，或者给 script 加 defer、async。浏览器边解析边构建 DOM 树，同时构建 CSSOM 树，两棵树合并成渲染树，然后布局、绘制、合成。用户看到页面。

页面加载完不代表流程结束。JavaScript 可能还在发请求、绑定事件、初始化组件。用户滚动页面，懒加载的图片才开始请求。用户点击按钮，又触发一轮新的请求-响应循环。整个网站流程不是线性的，是一张不断分叉的图。

每个环节都可能出问题。DNS 被污染、TCP 连接超时、TLS 证书过期、Nginx 配置写错、后端代码死循环、数据库连接池耗尽、CDN 回源失败、JS 报错白屏。排查的时候得一层一层剥。Chrome DevTools 的 Network 面板能看到每个请求的耗时分布，Waterfall 图一拉，瓶颈在哪一目了然。

网站流程说到底就是数据在客户端和服务器之间来回跑。跑得快不快，稳不稳，取决于每一段路的宽度和红绿灯。做技术的人天天在修路和调灯。