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

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

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(">, 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上。

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

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13666