← #804

200 毫秒：一次 HTTP 请求的完整一生

查看原文 HN 讨论

文章摘要

《200 Milliseconds》是 The Nodebook 制作的一个交互式可视化页面（同时也是其付费书《从网线往上搭建后端框架》的推广物）。它的设定很简单：在一家咖啡馆里，有人在平板上点了一次「购买」，211.4 毫秒之后屏幕显示「订单已确认」。整个页面就是把这 211.4 毫秒摊开来讲。

页面的核心机制是「滚动距离等于时间」：你不滚动，时钟就不走；你往下滚，请求就沿着时间轴前进。顶部（在部分设备上是底部）有一个精确到微秒的时钟，一个紫色的圆点代表数据本身，始终自上而下移动。整条时间轴被切成八站：CLICK（点击）→ DNS → TCP → TLS → KERNEL（内核）→ LOOP（Node 事件循环）→ PG（Postgres）→ PAINT（渲染成像）。

内容覆盖面相当宽：从触摸板电容感应到中断被触发、HID 驱动上报坐标和按键状态，到浏览器接收到 click 事件；DNS 查询的线格式（每个标签前面带长度前缀，末尾的 0 对应那个通常被省略的根域点）、HSTS preload；TCP 三次握手和 TLS 1.3 握手；Linux 内核网络栈；Node.js 事件循环如何调度这次请求；Postgres 插入一行订单记录（注意：这个场景只是往数据库里写入一个 SKU 和数量，并不包含真实的支付授权）；最后回到浏览器的 DOM 更新和重绘。页面刻意面向没有网络背景的开发者，把每个术语都用平实语言解释了一遍。视觉上有一些颇受好评的设计，比如密文逐字覆盖明文的 CSS 动画。

顺带一提，这个页面的精神前身是 HN 上流传多年的经典项目 alex/what-happens-when（「当你在浏览器地址栏输入 google.com 并按下回车时发生了什么」），只不过这次加上了真实的时间尺度。

HN 评论精华

这场讨论有两条清晰的主线，而且相当分裂：一半人被这个可视化打动，另一半人认定它是 LLM 生成的、且技术细节有错。此外还有一大块讨论完全跑偏到了「200ms 到底算快还是慢」上。

关于延迟感知的门槛

• felooboolooomba 对页面那句「点击的人没有察觉到延迟」提出「actually」式的纠正：人是能察觉 200ms 的，只是这种情况下它不引起负面感受。zahlman 补充了他多年来学到的三条阈值：50ms 你会察觉；400ms 你会在意；2000ms 没有任何输出时，你开始怀疑它是不是崩了。p-e-w 吐槽最后一条肯定是很久以前的事了，因为现在几乎没有网站能在 2000ms 内加载完，这个页面在他手机上就花了三四秒，他完全没怀疑它崩了。Aurornis 澄清：这个阈值指的是「设备是否用某种反馈确认了你的操作」，而不是最终完成——你的手机在页面渲染前就已经给了链接高亮或进度条。aa-jv 提供了另一个领域的参照：在音频/合成器领域，下限是 8ms，超过就会让演奏者不适；据说战斗机控制系统的反馈阈值也在这个量级。

• 一批人认为 200ms 对「购买」来说反而太快了。jonahrd：我预期支付要花一两秒，200ms 反而让我怀疑出了问题。JoeBOFH 给这种心理起了个名字——「工作感知」（perception of work）。antonymoose 讲了真事：产品负责人要求他在「禁用按钮 + 加载转圈」上人为加延迟，因为 API 快得不合他们口味。mrloop 补充了一个更正当的版本：异步操作有时快到不该显示忙碌态，但并非总是如此，与其让 UI 闪一下显得卡顿，不如给忙碌态设一个最短显示时长。blue_sauce_bean 联想到 2010 年 Google Instant Search，dataflow 形容那种体验「像你每说一个词对方就抢着根据前缀猜你要说什么」。

• jameshart 和 chrismorgan 都指出这个例子选得不好：它其实只是往 Postgres 插了一个 SKU 和数量，支付显然是带外处理的，「不如改成点赞按钮」。clickety_clack 认为 Visa 交易不可能快过约半秒。

• ahofmann 提出了一个地理约束：美国太大，50ms 对所有人来说物理上不可能；他作为德国开发者给德国人做东西时，超过 100ms 用户理应生气，但要给美国人同样的速度就得造完全不同、复杂得多的系统。fragmede 和 rcxdude 就此展开：在 PoP 终止 TLS、复用到中心 API 服务器的热连接可以避免分布式系统的头痛，但 LtdJorge 指出光脉冲还是要穿越几千公里的光纤，50ms 依然物理不可能——真要 50ms，就得付出分布式一致性的代价，而对 Google 以下规模的公司这太贵了。

• jvuygbbkuurx 贡献了一个有意思的观察：前东家食堂的 POS 机处理非接触支付大约 100–200ms，感觉比任何超市（同款设备）快一个数量级，「你把卡凑过去的时候感觉小票已经在打了」。jonathanlydall 从南非给出解释：大连锁的刷卡机是有线连到光纤路由器，小店用的是内置 GPRS 模块的机器；他有次帮一个摊主把刷卡机连上邻店的免费 WiFi，不但解决了当时的故障，之后所有交易都明显变快了。

面试题的怀旧

• inerte 说「用户在地址栏输入 URL 并回车之后发生了什么」曾是经典面试题，而他印象里从来没有人提到过硬件、键盘按键和中断——这篇做到了。Sesse__ 讲了个反面案例：他被问到这题时从键盘开关和中断讲起，面试官叹了口气让他直接跳到浏览器部分。stevepotter 说他用的版本是「告诉我按下购买按钮之后发生了什么」，有人只讲 JavaScript 和 Node 代码，有人讲 TCP，有人讲云——不分好坏，但极能看出一个人的关注点在哪里。「这个网站基本上是这道题的作弊码。」jameshart 则希望有一个能真正缩放的版本，去展开这一切的分形复杂度——光是最后那个 DOM 更新和渲染里，就还藏着完整的 Unicode、字体栈和栅格化流程。

「这是 AI 写的」之争

这是讨论后半段的绝对主线，而且批评相当具体。

• ahofmann 最早提出：有些内容的排序很奇怪，不像一个真正懂这些环节的人会这么组织，感觉像是 LLM 搭好之后，出题的人看了一眼说「行吧，够用了」。mimischi 举了具体证据：「The Click」下面那句「在一个字节离开笔记本之前的五毫秒硬件和浏览器簿记工作」，这种「……之前」的句式一眼可辨。

• 最有杀伤力的是关于紫色的那条。页面明文写着「紫色标记移动中的数据，永远自上而下。页面上没有别的东西用这个颜色。」joshstrange 和 Retr0id 都指出，屏幕上同时有三四个紫色元素——左上角的「ms」、旁边的圆点、底部时间轴上的点，往下滚还有更多。Retr0id 的结论是：紫色就是这个页面的强调色，用在所有地方，所以这句话令人费解，「我只能假设『作者』根本没读过 LLM 的输出就发出来了」。anon7000 给出了一个精妙的还原：这闻起来像 LLM 收到一条很具体的指令（「时间轴的数据要用一种统一的颜色，现在用了好几种，很混乱」）之后写下的自我辩解式回顾。这条引出了整个帖子里最长的一段跑题——foolswisdom、pennomi、stratts、Toutouxc 轮番吐槽 LLM 把代码注释和文档当成个人日记的习惯：记录下临时的实现权宜之计，后续会话把它当成不容置疑的产品需求；或者在你否决了一个过度设计的方案之后，每一步都留下「我们为什么没有做那个疯狂的事」的长篇注释。taneq 补充了同类问题：页面说「顶部的时钟是精确的」，但在他手机上时钟在底部。

• paimapi 给出了最被认可的风格批评，创造了一个流行词：「mic-droppy」（老是抖包袱式的收尾）。他分析这种 RLHF 腔为什么让人本能地想略过——讲解者是被动的、没有内在视角，只告诉你而不展示给你；如果改用第二人称（像大多数讲解文那样）会好读得多。magarnicle 接梗：「现在我能想象 Claude 每次被我纠正之后又讪讪地把话筒捡起来的样子了。」josters 补充了「this-not-that」句式（不是 X，而是 Y）也属于同一套，并联系到费曼学习法——能用简单语言准确解释需要真正理解概念，而解释中的缝隙正是提示解释者需要回头深挖的地方；而 AI 并没有这种理解，它只会兴高采烈地把你要它论证的点论证到底。

• 具体的技术错误也被逐条挑出。mlyle 算了笔账：文中说「等确认渲染出来时，请求和回复已经六次横穿北美」——35ms × 6 = 210ms，物理上刚好可能，但这就不给任何主机、也不给咖啡馆的 WiFi 留下任何时间了。hex4def6 从硬件角度反驳「一毫秒内点击已穿过四层软件」：即便电容触摸控制器瞬时响应，一个不错的 200Hz 采样触摸系统最坏情况就是 5ms、平均 2.5ms，已经是宣称预算的 2.5 到 5 倍，而且还没离开显示屏；他估计端到端更接近 40–50ms。chrismorgan 举了 HSTS preload 的例子：这里完全不相关，因为你已经知道是 HTTPS 了；就算是 HTTP，该讲的也是 HSTS 本身，preload 列表实际上只是一个预填充的缓存。imtringued 指出前后矛盾：开头讲「多个请求」，滚到最后又变成「单个请求」；TCP/TLS 握手产生的往返不该被算成多个请求，TCP 根本没有「请求」这个概念。dilyevsky 挑了「MAC 地址是出厂时烧进每块网卡的序列号」这一句——「哎哟」。Method5440 则对 DNS 那段的表述表示困惑。

• 也有人明确站在页面这边。beders：「这太壮观了！带我坐了一趟四十年计算机和网络知识积累的过山车。」eterm 单独称赞了密文覆盖明文的 CSS 动画。sqemo 说自己本来就熟悉整体概念，但这种按时间顺序的分步讲解让理解容易多了。asibahi 在另一条帖子里说出了不少人的心声（虽然是在 34 号那篇下面）：现在每个论坛的每个帖子都有一半时间在争论一篇文章是不是 AI 写的，好像糟糕的写作是 AI 发明的一样。