其中一些可能是你的日常工具，但我敢肯定至少有几个会让你惊呼"等等，浏览器竟然有这功能？"
好了，废话不多说，让我们开始吧。
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上。
所以在全面采用之前，一定要检查兼容性。
但仅仅是知道这些存在，已经让你领先一步了。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！