10个被低估但实用的Web API：从深拷贝到文件系统访问

盘点十个你可能忽略了，但却能解决实际开发痛点的 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 API 能提供精确的测量：

performance.mark("start");

// 要测量的代码

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

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

它非常适合：

• 进行微基准测试
• 验证使用 WebAssembly 是否值得
• 检查你的优化假设是否成立

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

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

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

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

现实是，用户会打开你的应用，然后切换到其他标签页去处理别的事情。使用这个 API 可以在后台优化资源。

使用场景：

• 自动暂停视频/音频播放
• 停止不必要的后台轮询
• 降低非活跃页面的 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);

它非常适合：

• 实现无限滚动列表
• 图片或内容的懒加载
• 触发滚动动画

任何手动实现过一次无限滚动逻辑的开发者，都会对这个 API 心存感激。

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

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

很多开发者知道它可以用于取消 fetch 请求，但它能取消的远不止 fetch。

const controller = new AbortController();

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

// 稍后
controller.abort();

你还可以利用它来：

• 取消事件监听器
• 中断可读/可写流
• 中止任何实现了 AbortSignal 的 API
  更棒的是：一个 AbortSignal 可以同时取消多个关联的操作。

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

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

Page Visibility API 告诉你标签页是否活跃。Idle Detection API 则更进一步，告诉你用户本人是否活跃（无操作）：

const detector = new IdleDetector();

await detector.start();

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

意思是：用户可能打开了你的应用标签页，但实际上正在开会或者离开了电脑。

使用场景：

• 自动登出（安全会话管理）
• 状态设置为“离开”
• 在用户无操作时进行后台优化

这个 API 功能强大，但需要用户授权。目前主要支持基于 Chromium 的浏览器。

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

它提供了一种在同源下的不同标签页、iframe 或 worker 之间进行简单通信的机制：

const channel = new BroadcastChannel(“app”);

channel.postMessage(“logout”);

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

非常适合：

• 同步登录/登出状态
• 跨标签页共享认证令牌或应用状态
• 广播通知消息

对于用户习惯于打开多个标签页的真实应用来说，这非常实用。

浏览器支持：现代浏览器，Safari 也已在较新版本中支持。

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

BroadcastChannel 的“表亲”，用于协调跨标签页的共享资源，防止重复工作：

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

非常适合：

• 确保只有一个标签页去轮询或获取服务器通知
• 避免多个标签页同时向后端发送相同请求
• 协调对共享资源（如 IndexedDB）的访问

目前该 API 主要在基于 Chromium 的浏览器中得到支持。

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

是的，现代浏览器允许网页在获得用户明确授权后，直接访问真实的本地文件系统：

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

非常适合：

• 在线代码编辑器或 IDE（如 VS Code for Web）
• 需要复杂导入/导出功能的工具
• 面向高级用户的桌面类 Web 应用

同样，这个强大的 API 目前主要由 Chromium 内核的浏览器支持。

支持度与小结

这些 API 的支持情况不尽相同。有些（如 StructuredClone、IntersectionObserver）在现代浏览器中已经得到良好且广泛的支持。而另一些（如 Idle Detection、File System Access、Web Locks）则仍然主要集中在 Chromium 内核的浏览器上。

因此，在生产环境中全面采用之前，务必检查 Can I use 或进行特性检测。但仅仅是知道这些能力的存在，已经能让你在设计和解决前端问题时，拥有更多的思路和工具。

掌握这些 API，可以帮助你写出更高效、更健壮的现代 Web 应用。如果你想深入探索更多前端领域的“破局”技巧和深度实践，欢迎来到云栈社区 参与交流，这里有丰富的技术资源和开发者同伴。