为什么原生 JavaScript 很重要

为什么原生 JavaScript 很重要

核心观点：对于大多数项目，原生 JavaScript 仍然是最佳选择

原生 JavaScript——即纯粹、无框架的代码——仍然是构建 Web 界面最高效的方式，因为它避免了与库和框架相关的运行时开销、包体积以及锁定效应。

消除不必要的开销

结论： 使用原生 JavaScript 可以移除框架引入的额外 JavaScript 负载，从而实现更快的页面加载速度和更低的带宽消耗。

  • 现代浏览器对 DOM 操作、事件处理以及通过 Fetch API 进行的 AJAX 具有原生支持。这些功能不再需要 polyfills 或抽象层。
  • 一个典型的 React 或 Vue bundle 在进行代码分割之前会增加 30 KB–150 KB 的 gzipped JavaScript。相比之下，一个相当的原生实现可以控制在 10 KB 以下。
  • 更快的加载时间可以改善 Core Web Vitals，特别是 Largest Contentful Paint (LCP) 和 First Input Delay (FID)，这些指标直接影响 SEO 和用户留存。

性能提升是可衡量的

结论： 基准测试一致表明，对于简单的 UI 交互，原生实现的性能优于框架等效实现。

  • 2023 年 Web.dev 的一项案例研究测量出，在将一个小型的 React 组件替换为原生代码时，JavaScript 执行时间减少了 45 %。
  • 由于不存在虚拟 DOM 的 diffing 步骤，更新直接发生在真实的 DOM 上，从而消除了 reconciliation 的开销。
  • 缺乏框架运行时可以减少内存使用，这对于低端设备和嵌入式浏览器至关重要。

降低依赖风险

结论： 依赖原生 JavaScript 可以消除维护第三方库的负担，因为这些库可能会被弃用或产生漏洞。

  • 框架遵循发布周期，可能会引入破坏性变更（breaking changes）；而使用原生代码意味着只有浏览器规范在演进。
  • 安全补丁仅限于浏览器本身，浏览器会自动接收更新，而库则需要手动进行版本升级。
  • 避免外部依赖的项目可以避免传递依赖、版本冲突以及供应链攻击带来的“依赖地狱”。

通过标准实现面向未来

结论： 随着 Web 平台的演进，新标准被直接添加到浏览器中，使得原生代码变得越来越强大。

  • Custom Elements、Shadow DOM 和 ResizeObserver API 等功能现在已是原生支持，不再需要组件库。
  • Intl 和 Temporal API 提供了强大的国际化和日期-时间处理能力，无需外部包。
  • 渐进式增强（Progressive enhancement）鼓励首先使用原生 JavaScript 构建核心功能，然后在此基础上叠加可选的增强功能。

何时框架仍然有意义

结论： 框架对于需要结构化架构、状态管理以及大型开发团队的大型、复杂应用是合理的。

  • 框架强制执行约定（路由、状态容器、组件生命周期），有助于在许多贡献者之间保持一致性。
  • 生态系统工具——例如热模块替换（hot-module replacement）、类型安全的 props 以及广泛的 UI 组件库——可以加速功能丰富的产品的开发。
  • 决策应基于项目规模、团队专业知识以及性能要求，而不是基于炒作。

采用原生 JavaScript 的实践步骤

结论： 当开发者遵循一些有纪律的实践时，转向原生 JavaScript 是非常直接的。

  1. 从浏览器 API 开始 – 在寻求使用库之前，先尝试使用 document.querySelector、addEventListener 和 fetch。
  2. 使用 ES Modules 进行模块化 – 将代码拆分为可复用的 .js 文件，并使用原生的 import 语句进行导入。
  3. 谨慎使用构建工具 – 仅使用极简的 bundler（例如 esbuild 或 vite 的 library-mode）来进行旧版浏览器的转译，而不是为了 polyfill 整个框架。
  4. 编写测试 – 使用 Jest 和 jsdom 等工具对 DOM 交互进行单元测试，以在代码库增长时保持信心。
  5. 记录模式 – 为常见任务（例如组件创建、状态处理）创建共享的样式指南，以保持代码库的一致性。

总结

原生 JavaScript 交付了卓越的性能、更低的维护开销，以及与不断演进的 Web 标准更好的契合度，这使得它成为大多数 Web 开发任务的默认选择，除非项目的复杂度足以证明使用功能齐全的框架是合理的。

Sources