本站不再只整理“前端周刊”，而是持续追踪前端、AI Agent、大模型，以及前端转向 AI Agent 开发所需的面试与能力体系。
帮助前端开发者快速看清趋势、做出技术决策，并找到真正值得投入的方向。
在线阅读：https://frontendnext.com/
这个仓库现在包含三部分：
- AI情报站：7×24h 跟踪 AI、Agent、前端、科技资讯，以卡片流形式持续播报，支持复制转发与查看出处。
- 原·前端周刊：保留并继续更新历史周刊内容，作为长期积累的一线信号源。
大模型正在重塑软件开发的分工边界。过去前端的核心价值在于把设计稿变成可交互的界面；而现在，越来越多的交互逻辑、流程编排、甚至用户意图的理解，都在被 AI 接管。
前端如果只会写组件，正在失去不可替代性。
真正的机会在于向上转型——成为能够设计、构建、调试 AI Agent 的开发者。这不是追风口，而是顺应一个基本事实：当 AI 成为产品的核心交互层，懂得驾驭 AI 能力的工程师，才是下一代应用真正需要的人。
/：AI情报站首页/weekly：原·前端周刊列表页/weekly/[slug]：具体某一期周刊正文
- 前端技术演进：框架、浏览器 API、构建工具、性能与交互范式
- AI Agent 与大模型：模型能力、Agent 基础设施、MCP、工作流与落地方式
- 面试与能力体系：适配“前端开发转型 AI Agent 开发”的能力模型与面试方向
跟踪海外一线技术平台、标准提案、框架发布、产品公告与开发者讨论。参考：海外前端动态情报源清单（持续更新）
💡 号召参与翻译：我们号召更多的小伙伴参与到每篇技术文章的翻译中来！
如果你对某篇文章感兴趣，欢迎在对应期数目录下创建翻译文档并提交 PR，让更多中文开发者受益。
-
第470期（6月8日–6月14日） ⭐ 最新
-
- Cloudflare：Agent Readiness 分数来了，你的网站准备好给 Agent 用了吗？
- 用 TanStack 搭一个博客（上）
- masonry-gridlanes-wc：一个原生优先的 Masonry Web Component
- 让网站被 LLM 看见：6 个有效方法与 8 个无效招数
- 不用断点也能构建响应式 UI
- AI 生成的 UI 默认并不无障碍
- HTMX 4.0：超媒体开发进入新档位
- 2026 年 3 月 Baseline 月报
- 为什么 AI 不擅长前端
- Shadow DOM 的现代 CSS 特性支持现状
- CSS 里的弹簧物理
- CSS 多重描边文字效果
- Squash and Stretch：让动画活起来的小秘密
- CSS 游戏：4Connect
- CSS Breakpoint Units：像素设计与流式无障碍布局的新思路
- TanStack：按你的方式使用 React Server Components
- 你不能取消 JavaScript Promise，但有时又可以
- ES2026 来了：真正会改变写法的 JavaScript 特性
- 如何在 React 应用中测试多语言无障碍
- 用 dialog 做一个能优雅进出场的 React 模态框
- 什么时候该把 API 逻辑移出 Next.js
- Astro vs Next.js：内容型网站里 SSG 何时胜过 React
- 在 React 中嵌入安全的内联 PDF 查看器
-
- Front-End Fools：史上 10 个最离谱的愚人节 UI 恶作剧
- axios npm 投毒：恶意版本植入远程控制木马
- 拆解 Pretext 代码库：从别人项目里学真实工程取舍
- Astro 2026 年 3 月更新
- 用 Google Web MCP 让网站对 Agent 更友好
- 攻击者正在围猎高影响力 Node.js 维护者
- 图解 npm workspaces：一篇温和但够用的入门
- vinext explained：Cloudflare 的 Vite 系 Next.js 替代方案
- EmDash：Cloudflare 想重做插件安全模型
- view-transitions-toolkit：让 View Transitions 更容易落地
- 用 16 万个 Three.js 立方体把抖动可视化
- Arnaud Rocca 的作品集：从 GSAP 动效系统到流体 WebGL
- CSS or BS？重新审视 CSS 的表达边界
- Too Much Color：颜色系统不是越多越好
- 用 shape() 构建复杂 CSS 图形
- 用 Details 和 @scope 做钻取菜单
- position sticky 现在会按轴吸附到最近滚动容器
- What To Know in JavaScript（2026 版）
- JavaScript 里预加载图片的几种方式
- Signals 的 push-pull 算法到底在做什么
- 什么时候你才真的需要 startTransition
- 如何构建高性能 AI Markdown 渲染器
- React 里的可提升 SVG Defs
- 如何修复 React 应用里的内存泄漏
-
- Chrome 147：元素级 View Transitions 来了
- 更多网站支持自动进入视频画中画
- 三月 Web 平台新动态
- Deno Sandbox：内建、零配置的安全访问
- 支撑下一个十亿开发者的工具
- Chrome 146 DevTools 新变化
- Shadow DOM Focus Delegation：把 delegatesFocus 用对
- 告别 innerHTML，迎接 setHTML
- State of JavaScript 2025：TypeScript 统治力继续巩固
- 两个圆、一个箭头与 Anchor Positioning
- 用 Details 和 @scope 做钻取菜单
- Anchor Positioning 最大的坑
- Motion Highlights #17 动效精选
-
- 原生 JSON Modules 终于成真
- 用 Webflow、GSAP 和 Three.js 构建无缝 3D 转场
- WebMCP 正把任意 Chrome 页面变成 AI Agent 的 MCP Server
- 49MB 的网页
- Bun 很快，但你的事件循环并不快
- SVG Studio：浏览器里的 SVG 动画编辑器
- VoidZero 三月 Launch Week 回顾
- 什么时候 Deno 或 Bun 比 Node.js 更合适
- 可滚动容器里的下拉菜单为什么总坏掉
- 用 Popovers 和 AIM 构建图片画廊
- Flexbox Masonry 布局：用数学讲清楚
- light-dark() 即将支持图片
- 给脚注做高亮
- Temporal：修好 JavaScript 时间的 9 年旅程
- JavaScript 人人都该会：解构赋值
- TC39 推进 Temporal 到 Stage 4
- State of JavaScript 2025：TypeScript 统治力继续巩固
- 为什么我们自己做了一个 React Server Components 框架
- React 有两个大家不喜欢却躲不开的设计选择
- 为什么我们禁用了 React 的 useEffect
- 我们如何用 Next.js 改善 SaaS 的 Core Web Vitals
- React SSR 框架对决：TanStack Start、React Router 与 Next.js
- State of Vue & Vite 2026：阿姆斯特丹回顾
-
- W3C 37 周年：Web 战略目标的新进展
- GitHub Issue 也能偷走 npm 发布令牌？
- 维基百科遭遇自传播 JavaScript 蠕虫攻击
- Eleventy 改名 Build Awesome
- Astro 6.0 发布
- Form-Associated Custom Elements 实战
- 不用 JavaScript 做 Flappy Bird：纯 HTML + CSS
- Vite 8.0 发布
- 什么时候该用 WebMCP，什么时候用 MCP
- Vite+ Alpha 发布
- Webpack 2026 路线图：原生 CSS、Universal Target 与 v6 路径
- 用 GSAP 和 ScrollTrigger 实现滚动 SVG Mask 转场
- view-transitions-mock：Same-Document View Transitions 的非可视 Polyfill
- 用 Three.js 打造滚动响应式 3D 画廊
- contrast-color() 不止黑白
- corner-shape 为日常 UI 解锁了什么
- 地理位置元素的强制可访问性
- 用锚定容器查询构建动态 toggletips
- 把可定制 select 玩“坏”
- z-index 的真正价值
- 告别 Sass 嵌套，拥抱原生 CSS Nesting
- 把 CSS 动画当状态机记住 focus 和 hover
- 用 @supports at-rule() 检测 at-rule 支持
- 从 Moment.js 迁移到 Temporal API
- 认识 Effect TS：为什么它会改变 TypeScript 架构方式
- 用 Native Federation 构建 Angular 微前端
- 重新认识 JavaScript 的 .map() 方法
- 理解 React 的 key prop
- React 里的单例并没有你想的那么邪恶
- 一个面向 React 的 TypeScript 类式 WebSocket 库
- 在 React 和 Next.js 中构建动态表单
- 两周把 13 万行 React 重写成 Svelte
-
- SPA vs 超媒体：真实负载下的性能对比
- 前端内存泄漏：500 个仓库静态分析与五种场景基准研究
- Popover API 还是 Dialog API：该怎么选？
- Popover API 入门
- 用 NestJS 和 Google Gemini 构建 AI 聊天机器人
- 七年迁移到 TypeScript：Patreon 的 11000 文件改造
- 2026 如何选择样式架构：Tailwind、UI Kit 还是 CSS-in-JS
- Anchor Positioning 最大的坑
- 在 CSS 中选中 html 的几种方式
- 用 CSS 实现折角效果
- 实验：用 View Transitions 动画化 CSS position-area
- 不用 JavaScript 实现里程表滚动效果
- 用 CSS 画出 x86 CPU
- 不止模糊：CSS backdrop-filter 快速指南
- 在 JavaScript 中安全解析 JSON
- 理解 ToggleEvent.source 与 dialog.closedBy
- 今天就能用的外部 import maps
- 面向下一个十亿用户的 Next.js：为高延迟市场优化
- React 用 Activity 组件重塑流媒体交互
- React 基金会独立了，但 Meta 还没完全放手
- Pinia Colada：Vue 的数据获取层
- Angular 21 SSR 本地开发：变化、故障与修复
- 单例还是不是？正确理解 Angular Service
-
- Interop 2026：从开发者视角看 Web 互操作
- Interop 2026：让 Web 更加互操作
- Interop 2026 重点领域拆解：Igalia 视角
- TypeScript 6.0 Beta 发布概览
- WebMCP：让 Web 为 AI Agent 准备就绪
- 你可能根本不需要 role＝presentation
- Axe DevTools 集成 MCP Server：更早发现可访问性问题
- Webpack 2026 路线图解读
- 用 Three.js 和 WebGL 打造「无限」贪吃蛇场景
- 纯 CSS 实现弹性文字效果
- 一种更可靠的百分比高度写法
- 用 corner-radius 打造高级背景图案
- 用现代 CSS 打造响应式金字塔网格
- 用 CSS 打造完美的饼图
- 用现有 CSS 特性近似 contrast-color()
- Fun with TypeScript Generics：玩转 TS 泛型的实用技巧
- 用 Signals 做响应式状态管理
- 让 JavaScript 更容易「善后」的新能力
- Next.js 在企业级项目中的实践观察
- 在 React 中打造富文本编辑器的关键设计点
- 用 HTMX 为 React Data Grid 加速实时更新
- React 性能优化完全指南（LogRocket 解读版）
-
- 组合框 vs 多选 vs 列表框：如何选择合适的控件
- 浏览器讨厌意外：别再让布局“惊跳”了
- 别把单词拆成单个字母：可访问性警告
- Shadcn UI 采用指南：概览、示例与替代方案
- 用 AI 调试：能取代资深开发者吗？
- Interop 2025：趋同的一年
- 推出 Deno Sandbox：用 microVM 安全运行不受信任代码
- Deno Deploy 正式可用（GA）
- ESLint v10.0.0 发布
- ViteLand 2026 年 1 月新动态
- JS Bin 在 2026 年宕机
- 测量 SVG 渲染时间
- 零 JavaScript 的性能优化视频嵌入
- Node.js 16 到 25 的性能基准
- 破碎的心：一行“蠢代码”带来 100 倍提速
- 到底滚了没有？用 CSS @container scroll-state 查询判断
- Nice Select：把可定制的原生 select 玩到极致
- CSS @scope：命名约定与重度抽象的替代方案
- CSS Selection 2026：真实世界 CSS 使用现状
- 用现代 CSS 函数实现柱状图
- 解决 Shrinkwrap：一种全新的实验性技术
- 在 clamp() 里使用 auto 等关键字值
- 在 JavaScriptCore 中实现 Temporal 提案
- JavaScript 的显式资源管理
- 本地开发时间减少 83%：为何迁出 Next.js
- Remix、Next.js、SvelteKit 对比
- React Compiler 与类对象对 memoization 的影响
- Angular 中的增量水合：构建“秒开且可交互”的 SSR 应用
-
- Rolldown 1.0 RC 发布
- React 的 ViewTransition 元素
- 我偏好的 CSS Reset
- 拆解 CSS 堆叠上下文
- 粒子、进展与坚持：一次 WebGPU 流体之旅
- JavaScript 框架展望 2026
- JavaScript 框架——迈向 2026
- TanStack Start 的 Single Flight Mutations（Part 2）
- 一个月手搓 JavaScript runtime（Ant）
- TypeScript 中的 async/await 完全指南
- 介绍 ReliCSS：一款专为“前端考古”打造的工具
- 在 Chrome Canary 中体验文本缩放支持
- Yarn 6 预览版 | Yarn
-
更多内容持续更新中...
欢迎参与翻译！以下是参与流程：
cd frontend-weekly-digest-cn git remote add upstream https://github.com/TUARAN/frontend-weekly-digest-cn.git git pull upstream main
我们采用「自动化批量抓取 + 大模型初稿 + 人工 review」的方式沉淀材料，避免信息散落在各处。
| 阶段 | 操作 | 说明 / 输出 |
|---|---|---|
| 抓取 | 运行抓取工具 | cd web/fetch-translate-tool → npm install可视化： npm run ui命令行： node fetch-articles.js <url> |
| 整理 | 迁移与整理文档 | 把抓取后的 Markdown 移动到对应期数目录，并按现有文章格式整理 |
| 导出 | 自动化批量翻译与导出 | 已实现自动化批量抓取、大模型翻译与导出文档 |
| Review | 人工精修 | review（技术准确性） 个性化、故事化、联想化、标题化 |
| 提交 | 提交 PR | git checkout -b translate/文章标题 → git add . → git commit -m "feat: 翻译《文章标题》" → git push origin translate/文章标题PR 标题格式： feat: 翻译《文章标题》，描述说明期数与文章链接 |
| 审核 | 维护者审核 | 根据反馈进行修改（如有需要） |
说明：本地抓取工具位于 web/fetch-translate-tool/。
更多工具细节见：web/fetch-translate-tool/README.md
- 保持原文的技术准确性
- 使用流畅、易懂的中文表达
- 保留原文中的代码、链接和格式
- 添加必要的注释说明（如需要）
- 查看 周刊目录 选择感兴趣的期数
- 在对应期数的 markdown 文件中查看文章列表
- 直接提交翻译 PR（重点在 review 与个性化完善）
- 第449期：本期翻译 6 篇，6 篇来自于 嘿嘿
- 第448期：本期翻译 3 篇，3 篇来自于 嘿嘿
- 第447期：本期翻译 3 篇，1 篇来自于 樱吹雪，1 篇来自于 田八，1 篇来自于 嘿嘿
- 第446期：本期翻译 4 篇，2 篇来自于 嘿嘿，1 篇来自于 田八，1 篇来自于 樱吹雪
- 第445期：本期翻译 3 篇，2 篇来自于 田八，1 篇来自于 嘿嘿
- 第444期：本期翻译 1 篇，1 篇来自于 田八
- 第443期：本期翻译 5 篇，3 篇来自于 嘿嘿，1 篇来自于 田八，1 篇来自于 掘金安东尼
- 第442期：本期翻译 2 篇，1 篇来自于 田八，1 篇来自于 掘金安东尼
- 第432期：本期翻译 2 篇，2 篇来自于 樱吹雪
如果你喜欢这个项目，可以：
- 🌟 点一个 Star 支持我们持续更新
- 📮 提 issue 推荐英文内容源
- 📝 Fork 后参与翻译（欢迎 PR）
- 🤝 加入翻译团队，一起贡献内容
机器流量与自动化消费内容正在成为主流，"AI 看 AI"会形成反馈闭环，因而可验证的断言与一手来源变得更稀缺。但真正的护城河不是"最新"本身，而是"一手 × 可追溯 × 深度解读"的工程化能力。
欢迎关注我们的公众号，获取更多前端资讯！
加我微信：atar24，备注【前端周刊】，我会邀请你进交流群👇
🚀 每周分享技术干货 🎁 不定期抽奖福利 💬 有问必答，群友互助
- 在线阅读：https://frontendnext.com/
- GitHub：https://github.com/TUARAN/frontend-weekly-digest-cn
如果你需要在公众号/社群/朋友圈等渠道分发本站翻译内容，请在正文开头附上以下信息（建议原样保留，便于追溯与回链）：
原文：文章标题
翻译：译者署名
来源项目：前端周刊（每周更新国外论坛的前端热门文章，推荐大家阅读/翻译，紧跟时事，掌握前端技术动态）
网址/进群：https://frontendnext.com/
本站页面中的“本站总访问量 / 本站访客数”来自 不蒜子（Busuanzi） 统计服务：
- 本站总访问量：通常对应 PV（Page Views，页面浏览量）
- 本站访客数：通常对应 UV（Unique Visitors，独立访客数）
实现方式：在站点前端通过脚本方式加载不蒜子的统计脚本（见 web/app/layout.tsx），并在页面中渲染对应的统计占位元素。
注意：统计结果可能会受到广告拦截/隐私插件、浏览器策略、缓存与网络失败等因素影响，因此数值仅作参考。