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>https://channel.meo-ai.com/posts/640https://channel.meo-ai.com/posts/640Fri, 22 May 2026 10:24:20 GMT<span class="post-title-source">《Node.js官方发布Axios迁移Fetch指南》</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=%23FetchAPI" title="#FetchAPI">#FetchAPI</a> <a href="/search/result?q=%23Axios" title="#Axios">#Axios</a> <a href="/search/result?q=%23%E4%BB%A3%E7%A0%81%E8%BF%81%E7%A7%BB" title="#代码迁移">#代码迁移</a> <a href="/search/result?q=%23HTTP%E8%AF%B7%E6%B1%82" title="#HTTP请求">#HTTP请求</a><br /><br />总结：<br />Node.js官方博客发布了一个将Axios代码自动迁移到原生WHATWG Fetch API的codemod工具，详细说明了迁移理由、Node.js版本要求、支持的转换方法及具体代码示例，同时坦诚标注了暂不支持的高级特性。<br /><br />文章要点：<br />1. 迁移四大理由：Fetch是Node.js原生内置，无需额外依赖；性能针对现代运行时做了优化；严格遵循Web标准，浏览器和Node.js代码可复用；移除第三方库减少安全风险<br />2. 版本门槛：Node.js v18起Fetch可用但为实验性，v21起才稳定；如果包还兼容v18以下，迁移必须升主版本号并修改package.json的engines字段<br />3. 支持的转换方法覆盖很全，包括get、post、put、patch、delete、head、options、request以及postForm/putForm/patchForm等表单提交方式<br />4. 转换后的Fetch代码会用<code>Object.assign(res, { data: await res.json() })</code>来模拟Axios的<code>response.data</code>结构，让迁移后的代码改动最小化<br />5. 目前暂不支持拦截器、取消令牌和<code>axios.create()</code>实例配置等高级特性，这些场景需要手动处理<br />6. 官方对Axios维护者表达了感谢，认可其对生态的贡献<br /><br />URL：<br /><a href="https://nodejs.org/en/blog/migrations/axios-to-fetch" target="_blank" rel="noopener" title="https://nodejs.org/en/blog/migrations/axios-to-fetch">https://nodejs.org/en/blog/migrations/axios-to-fetch</a><a class="tgme_widget_message_link_preview" href="https://nodejs.org/en/blog/migrations/axios-to-fetch" target="_blank" rel="noopener" title="Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts."> <i class="link_preview_right_image" style="background-image:url('https://cdn4.telesco.pe/file/ej4bjz94abCNm6Z7pgT3GobaAe9h2LJm8ruR90FMRPeDllVqIXw5gGim3Fc0MThsmjooNygiTaow8YTMjOtc9bJx3hgP4qySOpjVqdrrPjgViylh0__axb4VR2v8YmJU1Kr9xujmBzeDQPOvPvOXyfnXcKQKXcO76nHt2Xmy8rZxT5LnYK_GmDR4_svaziYKtU3D94FNcvan-nt3Ov12uF5FPyEsuH4ZBZddlobQkmiydyc7pkDCGRxS-mSnoXtsAUZggk4_8y0RW7l_rxjAkEIzC_wZFX-Pglg-6M1H_0oesby_f9m9Gb_HagcrzJvB32hd_bD1gGTSunA94NEMJg.jpg')"></i> <div class="link_preview_site_name accent_color">nodejs.org</div> <div class="link_preview_title">Node.js — Axios to WHATWG Fetch</div> <div class="link_preview_description">Node.js<i class="emoji" style="background-image:url('//telegram.org/img/emoji/40/C2AE.png')"><b>®</b></i> is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.</div> </a>