Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/677https://channel.meo-ai.com/posts/677Sat, 18 Jul 2026 15:24:57 GMT<span class="post-title-source">《200毫秒：一次HTTP请求的完整旅程》</span><br /><br />标签：<a href="/search/result?q=%23%E5%90%8E%E7%AB%AF" title="#后端">#后端</a> <a href="/search/result?q=%23NodeJS" title="#NodeJS">#NodeJS</a> <a href="/search/result?q=%23%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE" title="#网络协议">#网络协议</a> <a href="/search/result?q=%23TCP" title="#TCP">#TCP</a> <a href="/search/result?q=%23TLS" title="#TLS">#TLS</a> <a href="/search/result?q=%23DNS" title="#DNS">#DNS</a> <a href="/search/result?q=%23HTTP" title="#HTTP">#HTTP</a> <a href="/search/result?q=%23Postgres" title="#Postgres">#Postgres</a> <a href="/search/result?q=%23Linux%E5%86%85%E6%A0%B8" title="#Linux内核">#Linux内核</a> <a href="/search/result?q=%23Web%E6%80%A7%E8%83%BD" title="#Web性能">#Web性能</a><br /><br />总结：<br /><br />这是一个交互式可视化网站，以旧金山咖啡店一次点击购买为起点，逐帧追踪HTTP请求在211.4毫秒内穿越北美大陆的完整生命周期。从触摸板电容变化到屏幕像素刷新，文章以精确的时间轴拆解了硬件中断、浏览器事件循环、DNS解析、TCP/TLS握手、内核网络栈、Node.js事件循环、Postgres事务提交、光纤传输、Wi-Fi重传、GPU渲染等每个环节，揭示了"冷启动"请求中60%时间消耗在握手、35%在传输、而服务器实际计算仅占1.4%的惊人事实。<br /><br />文章要点：<br /><br />1. 一次点击触发7层软件栈（触摸板→HID→窗口服务器→Chrome→渲染器→JavaScript→fetch）才发出第一个字节，而电容变化到网络请求离开仅需5毫秒<br />2. DNS查询通过UDP在2毫秒内完成，依赖Anycast路由将请求导向最近的解析器；TLS 1.3将握手从2个RTT压缩到1个，但仍需127毫秒建立加密隧道<br />3. 4,700公里光纤需6次穿越大陆，每次31毫秒；Wi-Fi碰撞重传仅需1.2毫秒，却足以容纳整个Postgres查询往返（0.35毫秒）<br />4. 服务器端50微秒内完成从网卡DMA→NAPI轮询→TCP重组→epoll唤醒→Node.js读取→TLS解密→HTTP解析→路由到handler的全流程<br />5. Postgres通过连接池、预编译语句和WAL组提交将INSERT优化至2.1毫秒，fsync强制刷盘是唯一的同步阻塞点<br />6. 响应返回后，Chrome还需经历kqueue唤醒、TLS解密、React重渲染、样式计算、布局、绘制、合成，最终等待4.4毫秒VSync才显示"Order confirmed"<br />7. 第二次"热请求"可复用TCP连接和TLS会话票证，将耗时从211毫秒降至约95毫秒，节省的116毫秒全是首次建立的连接成本<br /><br />URL：<a href="https://200ms.thenodebook.com/" target="_blank" rel="noopener" title="https://200ms.thenodebook.com/">https://200ms.thenodebook.com/</a><a class="tgme_widget_message_link_preview" href="https://200ms.thenodebook.com/" target="_blank" rel="noopener" title="A single HTTP request, traced in real time through DNS, TCP, TLS, the kernel, Node's event loop, and Postgres — then back to the pixel. Scroll distance equals time."> <div class="link_preview_site_name accent_color">The Nodebook</div> <img class="link_preview_image" alt="200 Milliseconds — the complete life of one HTTP request, visualized" src="/static/https://cdn4.telesco.pe/file/t14I1JhXbyzPs7gW4Yn8zJrTsax5z-Qb3M9gn0ONO53sIhEFWNIdP7_FhiW_o9ERCu-nSn5dK1SLk_9hkMfrB9pv93oWF6rcqg4vWWyrZ-HqQ3QZLy9hSlzkaqJxBenvOvKXT3Ew3A8HJnaEG7XJDmFA6OMVe5KIeM9Xw0nQNXUyRqCkYsGcmEopxeUxp6vBfTOe-9vyA9HG1JaewSc0SD7AsIHV9gpUaBjXqHvPTxfe457Yh3t_UK7DFhn9O9rZwEc8u3MMzQsQOBHZNMEdH0bAF8QztT4BkTRcLD8x-YzCWrTadmhslK12wNVgsmPJ_HQ3RceRazGqAGbaYdT-7w.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">200 Milliseconds — the complete life of one HTTP request, visualized</div> <div class="link_preview_description">A single HTTP request, traced in real time through DNS, TCP, TLS, the kernel, Node's event loop, and Postgres — then back to the pixel. Scroll distance equals time.</div> </a>