标准阵营呼吁开发者使用原生 Web 平台的声音喊了很多年,但前端工程化不仅没有变轻,反而在 npm 的依赖泥潭里越陷越深。

2026年10月3日,资深 Web 标准倡导者 Nolan Lawson 撰文反思了这一现象,并在 Lobsters 社区拿到 17 分与 5 条深度讨论。表面上看,这是一个老生常谈的工程抉择:浏览器内置能力明明更轻更快,为什么大家还是宁可安装上百兆的 node_modules 也不愿直接调用原生 API?

答案不是开发者懒惰,也不是 React 带来的路径依赖,而是原生 API 往往只是一份写给规范看的半成品。

原生规范与业务交付的认知断层 原生 API(标准视角) • 侧重规范断言与跨端统一 • 事件粒度原始,缺乏手势支持 • 默认缺少可访问性状态机 结果:可用,但在生产中极易踩坑 第三方库(工程视角) • 抹平移动触控与指针事件差异 • 内置无障碍键盘导航与焦点陷阱 • 提供符合框架范式的声明式接口 结果:增加包体积,但买断了试错成本

从历史断层到宜家效应的心理镜像

在早期的 Web 生态中,依赖三方库是一场生存自救。开发者不仅要伺候 IE6 这类顽固落后的旧载体,还得在碎成筛子的 DOM 规范里写满补丁。

亲手拼装弹窗带来的掌控感,让工程团队难以割舍第三方依赖(示意图)
亲手拼装弹窗带来的掌控感,让工程团队难以割舍第三方依赖(示意图)

今天的大环境完全不同了。现代浏览器早已经全面常青化,即便是被视为更新节奏最慢的 Safari 也能维持每年约 7 次更新。与此同时,W3C 与 WHATWG 持续推进 Baseline 与 Interop 兼容性倡议,曾经逼迫大家使用 jQuery 的客观技术断层几乎已经消失。

但开发者的使用习惯并未随之迁移。一方面,现代 npm 库普遍配有极其精致的文档站与交互演练场,相比之下,纯粹的规范文档和 MDN 页面依然停留在学术参考书的调性;另一方面,亲手用积木搭建一套方案本身具有极强的心理正反馈。

从零实现一个弹窗,手动去绑定 Esc 监听、处理焦点捕获(focus trap),再一步步打磨入场动画。这种如同拼装家具一般的宜家效应,曾经是整整一代工程师理解 Web 底层的启蒙路径。人们往往对自己投入心血写出的代码抱有超乎寻常的维护偏好,哪怕平台早已原生支持了 <dialog>。

但这依然只是表象。如果仅仅是为了满足掌控感,商业公司的工程团队绝不会为此长期买单。

一只拖拽组件暴露的工程半成品

以最基础的拖拽交互为例。浏览器早在十几年前就内置了原生 HTML Drag and Drop API,但在现代敏捷开发里,几乎没有任何正规项目敢直接拿它做列表拖拽排序。

导轨上被微型卡钳夹紧的亚克力卡片:机械滑轨上一张透明卡片被红色金属卡钳死死夹停阻断位移
导轨上被微型卡钳夹紧的亚克力卡片:机械滑轨上一张透明卡片被红色金属卡钳死死夹停阻断位移

原因不在于语法,而在于底层架构的南辕北辙:

  1. 时钟信号漂移原生 dragover 事件的触发时序在各大操作系统和不同浏览器引擎间存在明显差异。它最初的设计目标是承载操作系统窗口间的文件投递,底层机制根本无法充当现代前端组件流畅渲染的稳定动画时钟。
  2. 移动端支持真空原生 API 只要遇到触摸屏就会失去控制,缺乏开箱即用的触控激活距离与防滚动约束。
  3. 无障碍合规红线仅凭一个 draggable 属性完全无法满足现代 WCAG 2.2 无障碍规范,合规方案必须为视障或行动不便用户提供离散的“上移/下移”键盘与点击备选通道。

哪怕是经典轻量库 Dragula,其源码也直接依赖修改元素的 left 与 top 并频繁操作 DOM 树,在复杂业务容器中极易引发严重的几何重排性能瓶颈。

这也是为什么主流拖拽库 dnd-kit 会走向激进的架构重构。它将底层彻底迁移为 @dnd-kit/react 与 DragDropProvider,选择同早期由 @dnd-kit/core、@dnd-kit/sortable 和 DndContext 构成的旧体系彻底断代。

这种代际裂痕固然会带来迁移混乱,但它恰恰印证了一件事:前端需要的从来不是一个简单的 DOM 包装器,而是一个能接管边界情况、跨端手势调度与无障碍状态的容错引擎。

工程封装层背后的真实系统流向 1. 浏览器原生层 提供基本事件信号 时序漂移 / 缺移动适配 2. 容错状态机 (npm) 手势传感器 / 碰撞算法 兜底 WCAG 2.2 与边缘场景 3. 业务声明层 开箱即用的前端组件 快速迭代与稳定交付 中层的不可或缺,决定了依赖体系在面对半成品原生标准时拥有绝对统治力

AI 编码代理入场后的两种终局

这种因平台理解不足而绕弯路的情况并不只存在于前端。哪怕在 ClickHouse 这类高性能分析型数据库中,工程师也经常会下意识地先在应用层对 JSON 压缩、拆成键值外置存储,直到深入分析后才发现 ClickHouse 自带的列存压缩机制本就具备更优的表现,早期的自作聪明反而变成了系统的性能减速带。

智能生成既能直通极简底层,也可能层层追加冗余的胶水逻辑
智能生成既能直通极简底层,也可能层层追加冗余的胶水逻辑

认知成本往往是决定技术选型的终极分水岭。

繁复代码的根源不在于技术崇拜,而在于开发者无法承受试探平台隐性缺陷的时间成本。
  • 风险.如果未来的 AI 编程助手单纯以 npm 现存代码库作为训练语料,大模型将倾向于成倍生成过度包装的胶水代码,进一步固化前端生态对复杂三方库的依赖惯性。

站在目前的节点来看,AI 编程正在带来分化:

乐观的推论是,大模型具备对全平台 API 的全景记忆,且不存在人类的自研心理偏好。只要给足约束,智能体完全能跳过过度封装的 npm 包,为用户精准挑选最内省、最低开销的底层原生方案。

但现实往往更偏向审慎的一面。大语言模型极其擅长复制代码,在缺乏严格测试基准的生成场景中,它们会无节制地给业务追加一层又一层的辅助逻辑。当未经充分审视的生成代码被直接签入仓库,原本就冗余的工程结构便被彻底冻结。

规范不能只在象牙塔里通过测试用例,它必须在真实世界的触控手势、虚拟键盘和辅助设备上证明自己。只要原生 Web 平台依然将半成品推给一线工程,开发者就永远不会抛弃替他们挡子弹的第三方依赖。