📢 宣言：每周更新国外论坛的前端热门文章，推荐大家阅读/翻译，紧跟时事，掌握前端技术动态，也为写作或突破新领域提供灵感~
欢迎大家访问：github.com/TUARAN/fron… 顺手点个 ⭐ star 支持，是我们持续输出的续航电池🔋✨！
在线网址：fwdc.pages.dev/
💬 推荐语
回顾 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: stickytoposition: fixedon 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 的情况下实现交互需求。
✅ OK，以上就是本次分享，欢迎加我们威 atar24，备注「前端周刊」，我们会邀请你进交流群👇
🚀 每周分享技术干货 🎁 不定期抽奖福利 💬 有问必答，群友互助
