⏰前端周刊第 458 期v2026.3.24

image.png

💬 推荐语

本期关键词是“平台能力落地 + 性能现实主义 + 框架边界再讨论”。一方面，原生 JSON Modules、Temporal Stage 4、light-dark() 即将支持图片、Popovers + AIM、Flexbox Masonry 等特性，让 Web 平台继续从“能用”走向“更完整地好用”；另一方面，49MB 网页、Bun 与事件循环、SaaS 的 Core Web Vitals、React SSR 框架压测等文章，则继续把性能和工程选择拉回真实负载、真实用户和真实瓶颈。AI 与浏览器协作方向上，WebMCP、VoidZero 的节奏、SVG Studio 这样的工具，也都在表明：现代前端不只是框架竞争，而是一整套平台、工具和开发体验的重组。

🗂 本期精选目录

🧭 Web 开发

• Native JSON modules are finally real：原生 JSON Modules 终于真正落地，前端模块系统又少了一块长期需要工具兜底的区域。
• Building Seamless 3D Transitions with Webflow, GSAP, and Three.js：把 Webflow、GSAP 与 Three.js 组合起来，做出非常顺滑的 3D 过渡体验。
• WebMCP turns any Chrome web page into an MCP server for AI agents：WebMCP 让网页与 AI Agent 的关系更进一步，浏览器页面开始能直接暴露 MCP 能力。
• The 49MB Web Page：一个极端但非常有教育意义的案例，展示“网页过重”到底会在现实里有多夸张。
• Bun is Fast. Your Event Loop is Not.：运行时再快，也救不了被阻塞的事件循环，这篇文章把性能讨论重新拉回根因。

🛠 Tools

• SVG Studio：一个浏览器内 SVG 动画编辑器，能把静态矢量图转成平滑关键帧动画并导出干净 SVG。
• Tales from the Void: March Launch Week Recap：VoidZero 三月 Launch Week 的整体回顾，适合补齐近期工具链方向感。
• When Deno or Bun is a Better Solution than Node.js：不是所有服务端 JS 都该默认上 Node，关键是明确场景和约束。

🎨 CSS

• Dropdowns Inside Scrollable Containers: Why They Break And How To Fix Them Properly：滚动容器中的下拉菜单为什么总出问题，这篇文章把根因与正确修法讲得很透。
• Image Gallery with Popovers and AIM (Anchor-Interpolated Morph)：把 Popovers 和 Anchor-Interpolated Morph 组合起来，做出流畅的图片画廊过渡。
• Flexbox Masonry Layout (Explained with Math)：不用 JS 近似 Masonry 的经典命题，这次用数学方式讲清楚 Flexbox 解法。
• More Easy Light-Dark Mode Switching: light-dark() is about to support images!：light-dark() 即将从颜色扩展到图片资源，暗黑模式切换又少一堆手工逻辑。
• Highlighting Footnotes：一个小而美的体验优化话题：如何让脚注在阅读型页面里真正“被看见”。

💡 JavaScript

• Temporal: The 9-Year Journey to Fix Time in JavaScript：Temporal 的 9 年旅程本身，就是一段非常有代表性的语言演进史。
• JavaScript for Everyone: Destructuring：解构赋值看似基础，但它依然是写出更清晰 JS 的关键表达工具。
• TC39 Advances Temporal to Stage 4 Alongside Several ECMAScript Proposals：Temporal 晋级 Stage 4 是一个重要节点，也说明 JavaScript 时间处理终于要进入新基线。
• State of JavaScript 2025: Survey Reveals a Maturing Ecosystem with TypeScript Cementing Dominance：JavaScript 生态正在成熟，而 TypeScript 的支配地位也越来越像共识。

⚛️ React

• Less code, more power: Why we rolled our own React Server Components framework：自己做 RSC 框架并不只是技术冒险，它通常反映的是团队对边界和复杂度的重新判断。
• Two React Design Choices Developers Don’t Like — But Can’t Avoid：有些 React 设计长期被抱怨，但也恰恰构成了它今天的核心模型。
• Why we banned React’s useEffect：禁用 useEffect 这种激进做法背后，真正值得讨论的是副作用治理。
• How We Used Next.js to Improve Core Web Vitals for SaaS：把 Next.js 放回 SaaS 性能优化场景里，讨论真实的 Web Vitals 改善策略。
• React SSR Framework Showdown: TanStack Start, React Router, and Next.js Under Load：用真实负载压测对比 React SSR 框架，是今年非常值得关注的实践型文章。

🟢 Vue

• State of Vue & Vite 2026: Amsterdam recap：一篇社区视角的 Vue & Vite 大会回顾，适合快速补齐生态方向感。