一文分享10个被低估的JavaScript Web API

本篇我们盘点 10 个被低估的 Web API。

其中一些可能是你的日常工具，但我敢肯定至少有几个会让你惊呼“等等等，浏览器竟然有这功能？！”

好了，废话不多说，让我们开始吧。

1. Structured Clone API——深拷贝

前端开发一个经典的面试题就是：

“你如何复制一个对象？”

现在它有了终极解决方案：

const copy = structuredClone(original);

• 支持 Map、Set、Date、Blob、File、ArrayBuffer
• 处理循环引用
• 不会克隆函数

浏览器支持：现代浏览器（Chrome、Firefox、Safari、Edge）

2. Performance API——性能测量

我们经常谈论性能，但有点时候，你就只是想确认：“A 真的比 B 快吗，还是我在过度设计？”

performance.mark("start");

// 要测量的代码

performance.mark("end");
performance.measure("calc", "start", "end");

console.log(performance.getEntriesByName("calc"));

非常适合：

• 微基准测试
• 检查 Worker 或 WASM 是否值得使用
• 验证你的假设

浏览器支持：所有现代浏览器。

3. Page Visibility API——检测标签页是否活跃

检测标签页是否处于活动状态：

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    video.pause();
  }
});

说实话：用户会打开你的应用，然后切换标签页 20 分钟，或者 2 小时，甚至永远。

使用场景：

• 暂停视频
• 停止轮询
• 降低 CPU 使用率
• 获得更准确的分析数据

浏览器支持：所有现代浏览器。

4. ResizeObserver——观察元素尺寸变化

终于可以观察元素尺寸，而不仅仅是窗口尺寸：

const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log(entry.contentRect.width);
  }
});

ro.observe(element);

如果你曾经构建过响应式组件、图表或仪表板，那么这个 API 就是你的救星。

浏览器支持：所有现代浏览器。

5. IntersectionObserver——元素可见性检测

ResizeObserver 的兄弟 API，用于检查元素是否在视口中：

const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log("可见了!");
    }
  });
});

io.observe(element);

非常适合：

• 无限滚动
• 懒加载
• 滚动动画

任何手动实现过一次无限滚动的人……都不想再做第二次

浏览器支持：所有现代浏览器。

6. AbortController——取消操作的统一方案

很多开发者知道它可以用于 fetch，但它能取消的不仅仅是 fetch。

const controller = new AbortController();

fetch(url, { signal: controller.signal });

// 稍后
controller.abort();

你还可以用它来：

• 取消事件监听器
• 取消流
• 取消任何可中止的 API

更棒的是：一个 signal 可以取消多个操作。

浏览器支持：所有现代浏览器。

7. Idle Detection API——检测用户是否真的在

Page Visibility 告诉你标签页是否活跃。Idle Detection 告诉你用户是否活跃：

const detector = new IdleDetector();

await detector.start();

detector.addEventListener("change", () => {
  console.log(detector.userState);
});

意思是：用户可能打开了你的应用……但实际上正在泡咖啡或开会。

使用场景：

• 自动登出
• “离开”状态
• 后台优化

是的，你可以检测用户是否离开了电脑。有点诡异，但非常有用

浏览器支持：主要是基于 Chromium 的浏览器。需要权限。

8. BroadcastChannel API——多标签页通信

简单的多标签页通信：

const channel = new BroadcastChannel("app");

channel.postMessage("logout");

channel.onmessage = (e) => {
  console.log(e.data);
};

非常适合：

• 登出同步
• 认证状态
• 共享会话逻辑

在用户“以防万一”打开 5 个标签页的真实应用中非常实用。

浏览器支持：现代浏览器。Safari 加入较晚但已支持。

9. Web Locks API——跨标签页资源锁

BroadcastChannel 的表亲，防止跨标签页的重复工作：

navigator.locks.request("data-lock", async (lock) => {
  await fetchData();
});

非常适合：

• 只有一个标签页获取通知
• 避免后端请求泛滥
• 协调共享资源

浏览器支持：主要是 Chromium。不是通用支持。

10. File System Access API——真正的文件系统访问

是的——从浏览器直接访问真实的文件系统：

const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();

非常适合：

• Web 编辑器
• 导入/导出工具
• 高级用户应用

浏览器支持：主要是 Chromium。其他浏览器支持有限。

支持度

这些 API 有些在现代浏览器中已经很好的支持，有些（Idle Detection、File System Access、Web Locks）仍然主要集中在 Chromium 上。

所以在全面采用之前，一定要检查兼容性。

但仅仅是知道这些存在，已经让你领先一步了。

到此这篇关于一文分享10个被低估的JavaScript Web API的文章就介绍到这了,更多相关JavaScript Web API内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论