前端周刊第443期（2025年12月1日–12月7日）

前端周刊封面

💬 推荐语

本期周刊聚焦前端技术的实践与创新：从顶层元素的交互处理到作品集的设计实现，从 Vite 8 的重大升级到性能优化的新思路。工具链持续演进，CSS 能力不断增强，TypeScript 和 React 生态持续发展，前端开发正向着更高效、更优雅的方向迈进。

🗂 本期精选目录

🧭 Web 开发

• Top layer troubles: popover vs. dialog：顶层元素的烦恼：popover 与 dialog 的对比与选择。
• Two Portfolios, One Process: Where Design, Motion, and Code Come Together：两个作品集，一个过程：设计、动画与代码的完美结合。

🛠 工具

• What's New in ViteLand: November 2025 Recap：Vite 十一月更新回顾：新特性与生态进展。
• Vite 8 Beta: The Rolldown-powered Vite：Vite 8 Beta 发布：Rolldown 驱动的新一代构建工具。
• Bun is joining Anthropic：Bun 加入 Anthropic：JavaScript 运行时的新篇章。
• Oxfmt: Oxc Formatter Alpha：Oxfmt 发布 Alpha 版本：Oxc 格式化工具初体验。
• Bun 1.3: Is it time for devs to rethink the Node stack?：Bun 1.3：是时候重新思考 Node 技术栈了吗？

⚡ 性能

• NoLoJS: Reducing the JS Workload with HTML and CSS：NoLoJS：用 HTML 和 CSS 减少 JavaScript 工作负载。
• Fast by Default — a disciplined way of building software that stays fast as it grows：默认快速：构建随规模增长仍保持高速的软件方法论。
• 2025 In Review: What's New In Web Performance?：2025 年回顾：Web 性能的新进展。
• Web Performance 2025: The Shift from Optimization to Prediction：Web 性能 2025：从优化到预测的转变。

🎨 CSS

• The Deep Card Conundrum：深层卡片难题：复杂嵌套布局的解决方案。
• A view transitions fallback: DOMContentLoaded + requestAnimationFrame()：视图过渡的降级方案：DOMContentLoaded + requestAnimationFrame()。
• The Downsides of scrollbar-gutter: stable; (and one weird trick)：scrollbar-gutter: stable 的缺点（以及一个奇怪的技巧）。
• Non-Square Image Blur Extensions：非方形图片的模糊扩展效果。
• Anchor Positioning and the Inset-Modified Containing Block (IMCB)：锚点定位与 Inset 修改的包含块（IMCB）。
• Masonry: Things You Won't Need A Library For Anymore：CSS Masonry：你不再需要库来实现的功能。
• Gallery of Skewed Images with Hover Effect：倾斜图片悬停效果画廊。
• Scrollytelling on Steroids With Scroll-State Queries：使用滚动状态查询增强滚动叙事效果。
• Prevent a page from scrolling while a dialog is open：防止对话框打开时页面滚动。
• A pragmatic guide to modern CSS colours — part two：现代 CSS 颜色实用指南——第二部分。

💡 JavaScript

• AdventJS — Christmas Code Challenge: 24 exercises before Christmas：AdventJS 圣诞代码挑战：圣诞前的 24 个练习。
• The Nuances of JavaScript Typing using JSDoc：使用 JSDoc 进行 JavaScript 类型标注的细微差别。
• Drone-ambient-noise synthesizer in Javascript: when instability is a feature, not a bug：JavaScript 制作无人机环境噪音合成器：当不稳定性成为特性。
• Stop using JavaScript to solve CSS problems：停止使用 JavaScript 解决 CSS 问题。

TypeScript

• TypeScript strictness is non-monotonic: strict-null-checks and no-implicit-any interact：TypeScript 严格性是非单调的：strict-null-checks 和 no-implicit-any 的交互。
• How to unit test a Vue composable with TypeScript：如何使用 TypeScript 对 Vue 组合式函数进行单元测试。
• Category Theory for JavaScript/TypeScript Developers：JavaScript/TypeScript 开发者的范畴论入门。
• Progress on TypeScript 7 — December 2025：TypeScript 7 进展报告——2025 年 12 月。

React

• Critical Security Vulnerability in React Server Components：React 服务端组件的严重安全漏洞。
• React has changed, your Hooks should too：React 已经改变，你的 Hooks 也应该改变。
• Stop Blaming React for Your State Management Hangover：别再把状态管理的问题归咎于 React。
• The next era of React has arrived: Here's what you need to know：React 的下一个时代已经到来：你需要知道的一切。
• Critical RSC Bugs in React and Next.js Allow Unauthenticated Remote Code Execution：React 和 Next.js 的严重 RSC 漏洞允许未经授权的远程代码执行。

Angular

• Angular pipes: Time to rethink：Angular 管道：是时候重新思考了。

Svelte

• Advent of Svelte 2025：Svelte 降临日历 2025：学习挑战与实践。

📌 小结

从 Vite 8 的 Rolldown 引擎升级，到 CSS Masonry 原生布局；从 React 服务端组件的安全漏洞警示，到性能优化从"优化"到"预测"的范式转变，这一周的前端技术展现出"工具升级 + 安全防护 + 能力增强"的多维度发展。开发者正在获得更强大的原生能力和更快的构建工具，同时也需要更加关注安全实践和性能预测。