前端周刊 #56：Baseline 减包、MCP 无状态化与 AI Agent 工程化

本周快讯

MCP 2026-07-28 规范协议核心改为无状态请求/响应，移除会话 ID 与初始化握手，工具服务可更直接地横向扩容。
State of CSS 2026 年度调查公布，锚点定位成为最受关注的新能力，浏览器兼容性仍是采用新 CSS 的最大约束。
OpenAI GPT-5.6 系列分为 Sol、Terra 与 Luna 三档，模型能力与使用门槛继续影响 AI 功能的产品成本。
npm 恶意软件发布时扫描已开始影响包的可安装时间，团队应同步调整发布与紧急回滚流程。

技术文章

用 Baseline 审计依赖：把不再需要的 JavaScript 还给浏览器

Jad Joubran 将 Baseline 从兼容性标签变成依赖审计方法，按 Intl、HTTP、UI 原语和 Lodash 等簇逐项评估原生替代方案。

典型中型项目可减少约 60–90KB gzip 依赖，但文章也提醒 Temporal polyfill 等替换未必划算。结合真实用户浏览器分布做季度审计，比盲目“去依赖”更可靠。

在 JavaScript 内部实施渐进式增强

Remy Sharp 从弱网场景出发，讨论页面主业务尚未加载时如何先接住用户操作，而不是让点击或拖放直接失效。

把事件绑定、意图队列和即时反馈拆成轻量入口脚本，重模块加载后再消费队列。对包含编辑器、文件处理或大型 Markdown 依赖的前端尤其有参考价值。

用 Soak Test 在 CI 中发现 SPA 内存泄漏

Den Odell 将服务端常用的浸泡测试迁移到 SPA：在同一浏览器上下文反复运行可回到原点的用户流程。

先完成五轮预热再取基线，随后比较 DOM 节点、监听器与堆内存。这样能排除首次加载缓存，将长期使用后才暴露的泄漏变成可失败的自动化测试。

用 CSS 解除二维区域的滚动轴锁定

CSS Overflow 5 引入 scroll-axis-lock，让开发者能控制浏览器将手势锁定为横向或纵向滚动的默认行为。

地图、缩放图片、无尽画布和二维表格可用 none 立即响应斜向拖动。目前主要是 Chromium 153+ 的渐进增强，其他浏览器忽略声明时仍保留原有体验。

.canvas {
  overflow: auto;
  scroll-axis-lock: none;
}

Yelp 的 140 万行 Flow 单仓迁移 TypeScript 实战

Yelp 用多年时间将大型单仓从 Flow 迁移至 TypeScript，过程中让两套类型检查并行运行，避免一次性切换造成业务停摆。

类型覆盖率从 83% 提升至 96%。这份复盘的重点不只是语言选型，更是如何规划分阶段目标、兼容层和持续度量。

高频实时数据在 React 中的主线程卸载方案

文章给出高频图表与监控面板的完整分层：Ring Buffer、Web Worker、SharedArrayBuffer 与 OffscreenCanvas。

核心目标不是单纯缩短计算时间，而是让输入、布局与 React 渲染始终留在主线程。处理百万点图表或持续数据流时，应优先测量长任务和 P95 帧时间。

MCP 无状态化：Agent 工具服务不再依赖会话

MCP 2026-07-28 将协议核心改为无状态模型，每个请求可落到任意服务实例，不再强依赖长连接、会话 ID 或专用状态存储。

普通 tools、prompts 与 resources 服务可直接迁移；依赖服务端推送或会话回放的系统则应暂时保留双路由。对前端团队来说，这降低了自建 AI 工具后端的部署复杂度。

Docker Sandboxes：让编码 Agent 在 microVM 中自由执行

Docker Sandboxes 为 Claude Code、Codex、Copilot CLI 等编码 Agent 创建一次性 microVM，每个环境拥有独立文件系统、网络与 Docker daemon。

Agent 可以装依赖、跑测试和启动容器，而不会直接触及宿主机。需要长期自动化执行 Agent 的团队，应同时评估工作区挂载方式与网络访问策略。

工具推荐

Kitesurf：Cloudflare 为 AI Agent 构建的轻量浏览器

Kitesurf 运行在 Cloudflare Workers 上，针对截图和 HTML 提取等 Agent 任务设计，处于免费 Beta。

官方测试中，它比 Chromium 少用约 3–7 倍 CPU 与内存，且可通过 browser=kitesurf 接入既有 CDP、Playwright 或 Puppeteer 工作流。不适合依赖 WebGL、视频和长期登录态的场景。

TermDOM：把 HTML、CSS 与 DOM 带进终端

TermDOM 将真实 DOM、CSS 层叠、Flexbox、表格布局和浏览器式事件系统渲染为 ANSI 终端界面。

它支持原生 JS 或前端框架，用 DOM 变更自动触发重绘。熟悉 Web 平台但要开发 CLI 或 TUI 的团队，可以用它减少两套 UI 心智模型的切换。

npm install @b9g/termdom

celld：自托管 Cloudflare Workers 与 Durable Objects

Deno 推出的 celld 可在自有机器运行 Workers 和 Durable Objects，并以 S3 兼容存储协调部署、对象状态和节点归属。

每个对象拥有自己的 SQLite 数据库，存储桶通过条件写入保证对象单一所有权。适合想保留 Durable Objects 编程模型、但需要自主部署与成本控制的团队。

shadcn/ui 对话界面组件

shadcn/ui 发布 MessageScroller、Message、Bubble、Attachment 和 Marker 等对话层组件，面向 AI 聊天、客服和协作线程。

其中 MessageScroller 处理流式回复时最容易出错的锚定、自动跟随、历史追加和跳转行为。组件可复制和改造，也提供无样式的 @shadcn/react 基元。

scriptc：将 TypeScript 编译成原生二进制与 WebAssembly

Vercel Labs 的实验项目使用真实 TypeScript 类型检查器生成 LLVM IR，再输出无需 Node 的原生可执行文件或 WebAssembly。

静态编译不了的 npm 依赖与 any 代码可通过 --dynamic 嵌入 QuickJS。它更适合启动速度、体积和部署形态敏感的 Agent CLI，而非追求复杂动态生态的通用替代品。

Agentic Inbox：可自托管的 AI 邮件客户端参考实现

Cloudflare 开源的 Agentic Inbox 使用 React 19、Workers、Durable Objects、R2 和 Workers AI，实现带 AI 助手的完整邮件客户端。

每个邮箱单独隔离，内置 Agent 可搜索会话、起草和发送邮件。这是构建带权限、持久状态和人工确认环节的 Agent 产品的实用前端参考。

Page Agent：嵌入网页的自然语言 GUI Agent

Page Agent 通过页内 JavaScript 与 DOM 快照，让 Agent 直接理解并操作既有 Web 界面，无需浏览器扩展或独立无头浏览器。

它支持自带模型、跨页面扩展和 Beta 阶段的 MCP Server。后台系统、表单密集型 SaaS 和站内 Copilot 可用它快速验证自然语言操作路径。

AnyDoc：14 种办公文档统一转 Markdown

AnyDoc 是 Firecrawl 开源的 Rust 文档转换库，支持 Word、Excel、PowerPoint、OpenDocument、EPUB、CSV 和 PDF，并提供 Node、Python 与 WASM 绑定。

它适合 AI 工作流的资料入库与预处理：无需 API Key 或外部服务，浏览器端也可运行。扫描件 OCR 不在本地库范围内，仍需结合专用解析服务。