⏰前端周刊第446期（2025年12月22日–12月27日）

前端周刊封面

💬 推荐语

回顾 2025 年，前端圈从标准演进、组件化复兴到性能指标拆解都有值得复盘的故事。本期聚焦年度十大前端叙事、Web Components 的反弹势头、AV1 编解码器斩获艾美奖背后的行业推动力，以及用现代技术重现 8-bit 复古世界的创意实践。性能篇整理了字体懒加载、TTFB 指标误区、URL 参数优化与 DevTools 调试技巧；CSS 部分带来粘性定位的滚动切换、text-decoration-inset 的排版新思路与容器查询的 2026 展望；JavaScript 栏目则涵盖 Vue 生态的角色画像、年度趋势回顾、Zustand 入门与纯 HTML 替代 JS 的极简案例。

🗂 本期精选目录

🧭 Web 开发

• Frontend Wrapped 2025: The 10 storylines that defined the year：盘点 2025 年塑造前端行业的十大事件，从 RSC 落地到 AI 驱动开发的潮涌，为团队年度复盘提供参考坐标。
• Web Components Are the Comeback Nobody Saw Coming：观察 Web Components 如何凭借跨框架互操作和平台级支持重新站上舞台中央。
• When a video codec wins an Emmy：Mozilla 分享 AV1 视频编解码器拿下工程类艾美奖的历程，展示开放标准推动媒体体验的价值。
• Building a Nostalgic 8-bit Universe with Modern Tech: A Vibe Coding Journey：利用 Three.js、GSAP 与现代渲染管线复刻 8-bit 时代的拟物交互，详解灵感到上线的创作流程。

⚡ 性能

• Lazy-Loading Optional Fonts with Native Browser API：通过 CSS Font Loading API 按需懒加载可选字体，兼顾品牌体验与首屏性能。
• Chrome DevTools for Debugging Web Performance：深挖 DevTools 中的性能面板、网络记录与压测工具，构建系统化的排查流程。
• TTFB doesn’t mean what you think it means：拆解 TTFB 指标的真正含义及其与缓存、边缘计算的关系，避免被“低首字节”迷惑。
• Fixing the URL params performance penalty：分析 URL 查询参数为何拖慢缓存命中，并提供 CDN 与浏览器两侧的缓解策略。
• Server Components vs. Islands Architecture: The performance showdown：从交互延迟、流式渲染与缓存友好度比较 RSC 与 Islands 架构的性能取舍。
• Tips for making the Performance Panel less overwhelming：分享使用 Performance 面板时的时间线分层、标记与模板技巧，降低上手复杂度。

🎨 CSS

• Toggle position: sticky to position: fixed on Scroll：利用自定义属性与 IntersectionObserver 在滚动中优雅切换 sticky/fixed，实现头部栏的平滑吸附。
• text-decoration-inset is Like Padding for Text Decorations：介绍 text-decoration-inset 如何为文字装饰提供“内边距”，提升下划线排版控制力。
• Container queries in 2026: Powerful, but not a silver bullet：总结容器查询的新能力与当前限制，给出 2026 年的组件设计建议。

💡 JavaScript

• Characterize Vue.js：以人物设定讲述 Vue 生态的技术性格和社区价值观，重新认识框架背后的设计取向。
• Trends That Defined JavaScript in 2025：年度 JS 趋势回顾：生态整合、类型系统强化、平台 API 普及等关键动向。
• An Introduction to Zustand：Zustand 状态管理入门，涵盖基础概念、简洁 API 与 React 实战示例。
• Replacing JS with just HTML：通过原生 HTML 元素和渐进增强思路，展示如何在不写 JS 的情况下实现交互需求。