9个API干翻JS库大佬们，今天这条内容可能会颠覆你过去五年的前端认知！你有没有发现，你的项目里动不动就塞十几个 np

大佬们，今天这条内容可能会颠覆你过去五年的前端认知！

你有没有发现，你的项目里动不动就塞十几个 npm 包，就为了一个弹窗、一个懒加载、一个动画？
但你知道吗——浏览器早就把这些活全包了，而且干得比任何第三方库都漂亮。

下面这 9 个原生 API，每一个都足以让你删掉一个常用的 JS 库。建议偷偷收藏，别让老板知道你以前引了那么多冗余代码。

. `<dialog>`：原生弹窗，降维打击 SweetAlert

以前实现一个模态框：
遮罩层、z-index、居中定位、ESC 关闭、焦点锁定……写 200 行代码还可能出 bug。

现在只需要一个 <dialog> 标签 + 一个 showModal() 方法：

html

<dialog id="m">
  <p>我是原生弹窗，自带遮罩、自动聚焦、键盘关闭</p>
  <button onclick="this.closest('dialog').close()">知道啦</button>
</dialog>
<button onclick="document.getElementById('m').showModal()">点我弹窗</button>

弹窗库？不需要了。 浏览器就是最牛逼的 UI 库。

2. Popover API：工具提示？一行 HTML 搞定

Tippy.js、Popper.js 还在计算定位、处理边缘情况？
原生 popover 属性直接让元素升到顶层，点击外部自动关闭，完全不需要 JS。

html

<button popovertarget="tip">鼠标放过来</button>
<div id="tip" popover>👋 我是原生浮层，永远在最上面</div>

轻量、丝滑、无依赖。工具库开发者看完沉默了。

3. Intersection Observer：懒加载库，可以下岗了

以前监听滚动事件 + 节流 + 计算元素位置，一不小心就卡成 PPT。
现在用 IntersectionObserver，浏览器原生告诉你“这个元素出现啦”：

const observer = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.src = e.target.dataset.src;
  });
});
observer.observe(document.querySelectorAll('img[data-src]'));

lazysizes？再见了您嘞。

4. Resize Observer：再也不用 window.resize 猜元素尺寸了

想知道某个 div 宽高变化？以前只能轮询，或者用笨重的 window.resize + 计算。
现在：

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('宽高变了', entry.contentRect);
  }
});
ro.observe(document.getElementById('box'));

精准、高效，比 jQuery 的 resize 事件不知道高到哪里去了。

5. Mutation Observer：监听 DOM 变化，原生不比 Mutation Summary 差

想监控某个节点有没有被插入、属性有没有变化？
不用再引入 Mutation Summary 这种库了，浏览器原生支持：

const mo = new MutationObserver(mutations => {
  mutations.forEach(m => console.log('DOM 变了', m));
});
mo.observe(target, { childList: true, subtree: true });

Vue、React 的响应式原理也不过如此，你现在也能手撸一个。

6. Web Animations API：动画库的掘墓人

anime.js、Velocity.js 再香，有原生 Element.animate() 香吗？

document.getElementById('box').animate([
  { transform: 'translateX(0px)' },
  { transform: 'translateX(300px)' }
], { duration: 1000, iterations: Infinity });

暂停、反转、完成回调、时间轴控制…… 你能想到的动画操作，它全都有。
而且性能直逼 CSS 动画，控制力秒杀 CSS 动画。

7. CSS 容器查询：真正的组件级响应式

以前媒体查询只能根据视口大小变化，现在可以根据父容器大小变化：

css

.card {
  container-type: inline-size;
}
@container (min-width: 300px) {
  .card-title { font-size: 1.5rem; }
}

这意味着你的组件可以真正做到“在哪都能自适应”，什么 element-resize-detector 库，可以扔了。

8. Web Components：原生组件，干翻框架

想封装一个带样式的自定义按钮？不用 React、Vue，原生就行：

class MyButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button style="color:red">点我</button>`;
    this.style.display = 'block';
  }
}
customElements.define('my-button', MyButton);

Shadow DOM 隔离样式，Custom Elements 定义标签，一套代码跑所有框架，甚至不需要框架。

9. 表单验证 API：浏览器替你校验，不用再写正则

以前写表单验证，要么自己写正则，要么引 jQuery Validation。
现在只要在 HTML 里加上 required、pattern、min 等属性，然后调用：

if (!input.checkValidity()) {
  input.reportValidity(); // 浏览器自动弹出错误提示
}

样式统一、体验一致、零代码量。 还要什么验证库？

写在最后

我知道你可能会说：“这些 API 兼容性好吗？”
都2025 年了，大佬。 IE 已死，现代浏览器基本全支持。Edge、Chrome、Firefox、Safari 最新版都能跑得飞起。

以前我们用库，是因为浏览器太弱鸡。
现在浏览器已经武装到了牙齿，是时候给你的项目减负了。

你的项目里还有哪些臃肿的库？评论区告诉我，我帮你找原生替代方案。

如果这篇文章让你少引了几个库，点个赞，让更多人看到。

#前端 #JavaScript #HTML5 #编程 #干货

关注我，下期聊：5 个让 CSS 起飞的新特性，设计师看了直呼内行。

9个API干翻JS库

. <dialog>：原生弹窗，降维打击 SweetAlert