时间基准

本文聚焦 2026 年 5 月 – 9 月 的进展，信息截至 2026 年 9 月 23 日。版本号与日期已尽量通过官方博客 / npm registry 核对；标注 ⚠️ 的条目仅有第三方来源或官方页面未能直接核实，请以官方发布为准。

概述

如果用一句话概括 2026 年中的前端：AI 从"写代码的助手"变成了"前端的一类新用户"，而底层工具链基本完成了原生化替换。

方向	2026 年 5–9 月的关键词
AI 原生	MCP 2026-07-28 规范（无状态 + MCP Apps）、WebMCP origin trial、Chrome Prompt API 稳定、AI SDK 7、AG-UI 1.0
框架	React 19.3（<ViewTransition> 稳定）、Next.js 16.3、Astro 7、Angular 22、SvelteKit 3 RC、Solid 2.0 RC、Vue 3.6 RC
工具链	TypeScript 7（Go 原生）正式版、Rolldown 1.0、Vite+ Beta、Rspack 2.2、Vitest 5、Node 26 即将 LTS
Web 平台	Safari 27 正式版、Chrome / Firefox 改为两周一版、customizable select、sibling-index()、ES2026
数据与跨端	Zero 1.0、PGlite 周下载 1000 万、RN 0.87、Expo SDK 57、Lynx 月更、Electron 43
UI 与样式	Tailwind v4.3、shadcn/ui 默认切到 Base UI

下面分方向展开。

一、AI 原生前端开发

这是变化最快的一块，也是最值得前端开发者投入精力的一块。主线有两条：AI 帮你写前端（开发工具侧），以及 前端要服务 AI（协议 / 平台侧）。

1.1 MCP 2026-07-28 规范：协议走向成熟

MCP 在 05-21 发布 RC，07-28 发布正式版，这是一次架构级更新：

变化	说明
核心无状态化	移除 initialize 握手和 session ID，Server 可以像普通 HTTP 服务一样水平扩展、部署在 Serverless / Edge
Multi Round-Trip Requests	新增 input_required，一次调用中可以回头向客户端要补充输入
请求头路由	Mcp-Method / Mcp-Name 头，网关无需解析 body 即可路由
可缓存 list	tools/list 等结果带 ttlMs，减少重复拉取
授权	以 CIMD（Client ID Metadata Document）取代 DCR 动态注册
正式扩展框架	Tasks、MCP Apps、EMA 等作为扩展独立演进

对前端最重要的是 MCP Apps：MCP Server 可以返回一段在沙箱 iframe 中运行的 HTML UI，Host（Claude、ChatGPT、VS Code 等）直接渲染。原先社区的 MCP-UI（@mcp-ui/client）已被吸收进这个正式扩展。这意味着"给 AI 客户端做界面"正在成为一个新的前端细分方向。

TS SDK：@modelcontextprotocol/sdk 1.30.0（07-27）。

1.2 WebMCP：让网页直接成为 Agent 的工具

WebMCP 让网站在浏览器里把自身能力以工具形式暴露给 Agent，而不是让 Agent 去"看截图点按钮"。

• Chrome 149 开启 origin trial（Chrome 官方博客确认），DevTools 同步提供实验性支持
• 命令式 API 挂在 navigator.modelContext 上，另有声明式方案：直接给 HTML 表单加标注即可成为工具
• 标准在 W3C 社区组推进；⚠️ "Q4 稳定"目前仅为第三方说法

// 示意：向浏览器中的 Agent 注册一个工具（API 以 origin trial 文档为准）
navigator.modelContext.registerTool({
  name: 'add_to_cart',
  description: '把商品加入购物车',
  inputSchema: {
    type: 'object',
    properties: { sku: { type: 'string' }, qty: { type: 'number' } },
    required: ['sku'],
  },
  async execute({ sku, qty = 1 }) {
    await cart.add(sku, qty)
    return { content: [{ type: 'text', text: `已加入 ${qty} 件 ${sku}` }] }
  },
})

为什么值得关注

过去 SEO 让网站适配搜索引擎，接下来 WebMCP 可能让网站适配 Agent。电商、SaaS 后台这类"操作型"站点受影响最大。

1.3 浏览器内置 AI

⚠️ 据报道，Prompt API 在 Chrome 148（2026-05 初）对网页稳定开放，底层是端侧 Gemini Nano，支持文本 / 图像 / 音频输入，以及 JSON Schema、正则约束输出。

API	状态（I/O 2026 后）
Prompt API	稳定
Summarizer / Translator / Language Detector	稳定
Writer / Rewriter / Proofreader	Origin trial

if ('LanguageModel' in self && (await LanguageModel.availability()) === 'available') {
  const session = await LanguageModel.create()
  const result = await session.prompt('把这段评论分类为正面/负面：物流太慢了', {
    responseConstraint: {
      type: 'object',
      properties: { sentiment: { enum: ['positive', 'negative'] } },
    },
  })
  console.log(JSON.parse(result))
}

端侧推理生态：Transformers.js v4（3 月发布，新 C++ WebGPU runtime），窗口内最新 4.3.0（09-16）；WebLLM 0.2.85。

1.4 AI 应用框架与 Generative UI

• Vercel AI SDK 7（06-25）：从"调模型的 SDK"升级为"Agent 运行时"
  • WorkflowAgent：可持久化、可中断恢复的长流程 Agent
  • 工具审批（human-in-the-loop）+ 多级超时（总时长 / 单步 / 单工具）
  • HarnessAgent：用统一接口驱动 Claude Code、Codex 等编码 Agent
  • 原生渲染 MCP Apps；新增 @ai-sdk/otel 可观测
• AG-UI：Agent ↔ 前端的事件流协议，@ag-ui/core 1.0.0 于 09-17 发布
• A2UI（Google）：声明式 Generative UI 规范，v0.9 稳定，v1.0 候选中
• TanStack AI：08-21 进入 RC，支持 AG-UI 与 MCP
• ⚠️ v0 API GA（2026-08）：生成 → 迭代 → 预览 → 部署全流程可编程调用

几个协议的分工可以这样理解：

协议	解决的问题
MCP / MCP Apps	Agent 调用工具；工具可以带 UI 回来
WebMCP	网页把自己暴露成 Agent 工具
AG-UI	Agent 运行过程（消息、状态、工具调用）如何流式推给前端
A2UI	Agent 用声明式 JSON 描述"要渲染什么界面"

1.5 AI 编码工具的前端能力

编码 Agent 的竞争焦点从"写代码"移到了"看得见的 UI 迭代闭环"：

• Cursor：⚠️ Cursor 3 引入 Design Mode；3.7（06）支持在内置浏览器中点选、画框、语音描述修改 UI；云端 Agent 可转发预览并直接发布到 Vercel
• GitHub Copilot：Agent Plugins 1.0（08-12），把 skills + MCP server 打包成可安装插件的开放标准，AWS、Anysphere、OpenAI、Vercel、Google 等参与
• Claude Code：⚠️ 新增 /design、/dataviz 等 skill，Claude in Chrome 浏览器自动化 GA
• Next.js 16.3：next dev 会自动生成与项目版本匹配的 AGENTS.md——框架开始主动为 Agent 提供上下文

二、框架演进

2.1 React 生态

React 19.3（09-09）：

• <ViewTransition> 与 addTransitionType 转为稳定——声明式页面过渡动画正式可用
• Fragment Refs：可以给 <Fragment> 挂 ref，操作其子 DOM 节点
• react-dom 新增 browser()，显式跳过某段的 SSR
• Trusted Types 支持；Server Component 可直接渲染 Context

import { ViewTransition, startTransition } from 'react'

function Gallery({ photo }) {
  return (
    <ViewTransition name={`photo-${photo.id}`}>
      <img src={photo.src} />
    </ViewTransition>
  )
}
// 在 startTransition 中切换状态即触发浏览器 View Transition

其他：

• React Foundation：02-24 在 Linux Foundation 下成立，React / React Native / JSX 移交，仓库迁至 react/react
• React Router v8（06-17）：仅 ESM，默认开启 middleware
• Remix 3：不再依赖 React 的新框架，04-30 发布 Beta Preview，尚无稳定版
• TanStack Start：广泛用于生产，但官方稳定版公告仍未找到

Next.js 16.3（08-03） 是今年最重的一个 minor：

特性	说明
Instant Navigations	Partial Prefetching + Navigation Inspector + Playwright instant() 测试助手
Turbopack	大型项目 dev 内存最多降 90%，next build 默认磁盘缓存
TypeScript 7	支持用 tsgo 做类型检查
性能	原生 Node streams，吞吐 +22%
其他	catchError、import.meta.glob、root params、实验性 Rust 版 React Compiler

7–9 月连续多个安全补丁，当前 16.3.6（09-22），建议保持在最新 patch。

2.2 Vue / Nuxt

• Vue 3.6 仍在 RC：最新 3.6.0-rc.9（09-18），稳定线 3.5.43。核心是 Vapor Mode 与基于 alien-signals 的响应式重写
• Nuxt 4.5（07-18）：Vite 8、支持 Rspack 2 / Rsbuild、实验性 SSR 流式渲染、useLayout、命名视图，为 Nuxt 5 铺路

详见 2026 年 Vue 发展现状。

2.3 其他框架

框架	状态	亮点
Astro 7	06-22 正式版，当前 7.3.x	.astro 编译器 Rust 重写；基于 Vite 8；构建快 15–61%；src/fetch.ts 高级路由；识别 AI Agent 访问并输出 JSON 日志
Angular 22	06-03 发布，22.2（09-23）	⚠️ Signal Forms、Resource API、Angular Aria 稳定，Zoneless 生产可用，OnPush 成为默认
SvelteKit 3	08-13 RC	配置并入 vite.config.ts；$lib → #lib；load/render 错误边界；remote functions 与 async Svelte 仍实验
SolidJS 2.0	08-12 RC（rc.9）	一等公民 async、<Loading> 组件；⚠️ 默认 Rust/OXC 编译器
Qwik 2.0	beta.45	仍未稳定
TC39 Signals	Stage 1	窗口内无晋级

趋势总结：

1. Signals 已是事实标准——Angular、Vue、Solid、Svelte 全部基于细粒度响应式，只有 React 走编译器路线
2. 编译器 Rust 化——Astro、Solid、React Compiler（实验）都在用 Rust / OXC 重写编译器
3. 一等公民 async——Solid 2.0、Svelte async、React use() 都在解决"组件里直接 await"

三、工具链：原生化基本完成

3.1 TypeScript 7：Go 原生版正式发布

版本	时间	说明
TypeScript 6.0	03-23	最后一个 JS 实现版本，主要是为 7 做迁移铺垫
TypeScript 7.0 Beta / RC	04-21 / 06-18
TypeScript 7.0	07-08	Go 原生实现，约 10 倍提速；VS Code 全量构建 125.7s → 10.6s

注意

TS 7.0 尚无稳定的编程 API（预计 7.1 提供），依赖 TS Compiler API 的工具（部分 lint 规则、代码生成、vue-tsc 类工具）需确认兼容性后再升级。

3.2 VoidZero 系：Vite 8 + Rolldown 1.0 + Oxc + Vite+

• Vite 8（03-12）：Rolldown 统一取代 esbuild + Rollup；8.1 带来实验性 full bundle dev 模式；⚠️ 8.2 已发布
• Rolldown 1.0（05-07）：API 锁定遵循 semver，比 Rollup 快 10–30 倍，兼容 Rollup / Vite 插件
• Oxc：
  • Oxlint JS 插件（Alpha）：约 80% ESLint 用户可直接迁移
  • 类型感知 lint：oxlint --type-aware，基于 tsgo，覆盖 typescript-eslint 61 条类型规则中的 59 条
  • 6 月新增实验性 React Compiler lint 规则
  • Oxfmt：Beta，比 Prettier 快 30 倍以上
• Vite+ Beta（07-02）：MIT 开源，一个 vp 命令统一整条链路

vp dev     # Vite 开发服务器
vp check   # Oxlint + Oxfmt + 类型检查
vp test    # Vitest
vp build   # Rolldown 构建应用
vp pack    # tsdown 打包库

3.3 其他工具

工具	最新进展
Rspack / Rsbuild 2.2	08-26；CSS dev 构建快 ~3.7 倍，支持 Browserslist Baseline 查询；Rsbuild 2.0 起支持 RSC；Rslib 支持 TS 7
Vitest 5	09-03；最多快 53%，Trace View、vi.when、benchmark 重写；未 await 的异步断言直接失败
Biome	v2.4（02）后无新 minor
ESLint 10	02 发布；JSX 元素按变量引用处理
pnpm 11	纯 ESM、Node 22+；默认最小发布时间 24 小时（防供应链投毒）；存储索引改用 SQLite

3.4 运行时

• Node.js 26：05-05 发布，10 月进入 LTS。V8 14.6，Temporal 默认可用，类型剥离稳定并默认开启——可以直接 node app.ts
  • 注意：--experimental-transform-types 被移除，enum、参数装饰器等需要转换的语法不能直接运行，推荐开启 erasableSyntaxOnly
  • 从 Node 27 起改为每年一个大版本，且每个都进入 LTS
• Bun 1.4（08-20）：⚠️ 官方博客称用 Rust 完全重写，新增 Bun.WebView，兼容 Node 26.3
• Deno 2.9（06-25）：deno desktop、CSS 模块导入；2.8 带来 import defer

四、Web 平台

4.1 发布节奏变化

• Chrome（153 起）与 Firefox（155 起）在 9 月都改为两周一版
• Safari 27.0 于 09-17 正式发布（WWDC26 Beta 共 58 项新特性）

4.2 Safari 27 重点

• customizable <select>（至此 Chromium + WebKit 均支持）
• transform-aware 的 anchor positioning
• stretch 尺寸关键字、:heading 伪类、revert-rule、alpha()、多色 color-mix()
• scroll anchoring、<model> 元素扩展到 iOS / macOS
• WebAssembly JSPI、重写的 ESM 加载器
• Safari MCP server——浏览器厂商也在为 Agent 调试铺路

4.3 CSS 新特性支持状态

特性	Chrome	Safari	Firefox	可用性
Anchor Positioning	125+	26+	147+	✅ Baseline（2026-01）
Navigation API	✅	26.2+	147+	✅ Baseline
:open / field-sizing	✅	✅	✅	⚠️ Baseline（05 / 06）
Customizable select	135+	27+	Nightly pref	可渐进增强
sibling-index() / sibling-count()	✅	✅	154+	⚠️ 接近 Baseline
高级 attr()	✅	—	155+	部分
Grid Lanes（masonry）	flag	26.4+	flag	⚠️ 实验
scroll-state 容器查询	133+	❌	❌	仅 Chromium
Speculation Rules	✅	flag	❌	仅 Chromium

/* 可自定义样式的 select：Chrome 135+ / Safari 27+，其他浏览器自动回退为原生样式 */
select, ::picker(select) {
  appearance: base-select;
}

/* sibling-index()：不再需要 :nth-child 或 JS 来做错峰动画 */
li {
  transition-delay: calc(sibling-index() * 50ms);
}

Interop 2026 的重点领域包括：anchor positioning、样式容器查询、scroll-driven animations、view transitions（含跨文档）、scroll snap、shape()、:open、popover="hint"、WebTransport 等——这些是年底前最有希望全浏览器对齐的特性。

4.4 JavaScript 与底层能力

• ES2026（⚠️ 07 批准）：Temporal、Math.sumPrecise、Iterator.concat、Array.fromAsync、Map.prototype.getOrInsert 等
• Temporal：03-11 进入 Stage 4；Chrome 144 / Firefox 139 / Node 26 已支持，⚠️ Safari 稳定版（含 27）仍不支持，需 polyfill
• WebGPU：Chrome、Safari 26+ 默认开启；Firefox Windows 141+ / macOS ARM 145+
• WebAssembly 3.0：GC、Memory64 等已进规范；Safari 27 补上 JSPI

// Temporal：时区、日历运算终于有原生方案
const meeting = Temporal.ZonedDateTime.from('2026-10-01T09:00[Asia/Shanghai]')
meeting.withTimeZone('America/Los_Angeles').toString()
// '2026-09-30T18:00:00-07:00[America/Los_Angeles]'
meeting.add({ months: 1 }).toPlainDate().toString() // '2026-11-01'

五、数据架构：Local-first 走向生产

项目	进展
Zero 1.0（Rocicorp）	06-08；与 0.26 相比无破坏性变更，1.0 意味着 API 承诺稳定
PGlite	06-25 宣布周下载量达 1000 万（浏览器 / Node 中的 WASM Postgres）
Jazz	⚠️ v2 alpha
LiveStore / ElectricSQL	窗口内无重要发布

Local-first 的核心模式：UI 读写本地数据库 → 同步引擎后台与服务端对齐。交互零延迟、天然离线，代价是需要处理冲突与权限模型。Zero 1.0 的发布让它从"实验性架构"变成了可以认真评估的选项。

六、跨端与桌面

技术	最新版本	要点
React Native	⚠️ 0.87（08-11）	0.85 起只保留新架构、移除 Bridge；0.87 默认 Strict TS API、实验性 SwiftPM
Expo	SDK 57（06-30）	RN 0.86；修复 Hermes V1 内存回归
Lynx（字节）	3.9（08-03）	3.7 支持 macOS / Windows 桌面；3.8 起月更；Autolink、ReactLynx Portal
Electron	43（07-02）	Chromium 150、V8 15.0，启动快照加速冷启动
Tauri	2.11.x	稳定迭代，暂无 3.0

七、UI 与样式

• Tailwind CSS v4.3（06-12）：一方滚动条工具类、4 个新中性色板（mauve / olive / mist / taupe）、@container-size、官方 webpack 插件
• shadcn/ui 默认切换到 Base UI（2026-07），Radix 继续支持。Base UI（MUI 团队出品的无头组件库）当前 1.6.0
• 组件分发方式的共识："复制源码到项目" + 无头组件做行为层 + Tailwind 做样式层，这套组合对 AI 生成代码也最友好

实践建议

现在就可以用：

• 新项目直接上 Vite 8 / Rsbuild 2，lint 迁到 Oxlint（可与 ESLint 并存过渡）
• CI 类型检查尝试 tsgo（TS 7），收益立竿见影；依赖 Compiler API 的工具再等等
• 升级 pnpm 11，默认的 24 小时最小发布时间是低成本的供应链防护
• CSS 大胆使用 anchor positioning、:has()、容器查询、@scope；customizable select 以渐进增强方式使用
• 日期处理新代码开始写 Temporal（配 polyfill 兼容 Safari）
• Node 服务可以在 Node 26 LTS 后直接跑 .ts

值得投入学习：

• MCP（含 MCP Apps）与 WebMCP：前端与 Agent 的接口层，未来 1–2 年的新增量
• AI SDK 7 / AG-UI：构建 Agent 型产品的前端范式
• Signals 与编译器优化：理解 Vapor Mode、React Compiler 背后的原理

保持观望：

• Vue 3.6 Vapor、SvelteKit 3、Solid 2.0 均为 RC，生产项目等正式版
• Grid Lanes、scroll-state 查询、Speculation Rules 仍非跨浏览器
• Bun 1.4 大规模重写后的稳定性

延伸阅读

AI 原生

• MCP 2026-07-28 规范发布
• Join the WebMCP origin trial
• Built-in AI in Chrome（I/O 2026）
• AI SDK 7
• A2UI v0.9
• Agent Plugins 1.0

框架

• React 19.3
• Next.js 16.3
• Astro 7
• Nuxt 4.5
• SvelteKit 3 RC
• Solid 2.0 RC
• Angular v22
• React Router v8

工具链

• TypeScript 7 发布（InfoQ）
• Rolldown 1.0
• Vite+ Beta
• Oxlint 类型感知 lint
• Rspack 2.2
• Vitest 5
• pnpm 11
• Node.js 发布计划

Web 平台

• WebKit features for Safari 27.0
• Announcing Interop 2026
• Firefox 154 for developers
• WebGPU 实现状态

数据与跨端

• Zero 1.0 Release Notes
• PGlite 周下载破千万
• Expo SDK 57
• Lynx 3.9
• Electron 43
• Tailwind CSS v4.3
• shadcn/ui：Base UI 成为默认

贡献者: Ra1n

上一页跨域与安全

下一页基础知识