停止安装库：10 个已经能解决你的问题的浏览器 API
Source: Dev.to
Web 平台的强大程度超出大多数开发者的认识，并且每年它都会悄悄获得新的超能力。下面列出十个未被充分利用的浏览器 API，它们可以帮助你避免引入外部库，使代码更简洁、更快、更可靠。
Structured Clone (structuredClone)
一行代码即可实现深拷贝，支持大多数内置类型，包括 Map、Set、Date、Blob、File 和 ArrayBuffer。它还能处理循环引用（不再出现 JSON.stringify 的爆炸错误），但 不克隆函数。
const copy = structuredClone(original);支持情况： 现代浏览器（Chrome、Firefox、Safari、Edge）。可安全用于生产环境。
Performance API (performance.mark / performance.measure)
非常适合微基准测试、检查 Web Worker 或 WASM 是否值得其开销，或仅仅是对假设进行现实检验。
performance.mark('start');
// code to measure
performance.mark('end');
performance.measure('calc', 'start', 'end');
console.log(performance.getEntriesByName('calc'));支持： 在所有现代浏览器中表现出色。
页面可见性 API
检测标签页何时变为隐藏或可见，允许您暂停视频、停止轮询或降低 CPU 使用率。
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
video.pause();
}
});支持： 所有现代浏览器。
ResizeObserver
观察任何元素的尺寸变化——不仅限于窗口——从而让响应式组件、图表和仪表盘的实现变得更加简便。
const ro = new ResizeObserver(entries => {
for (const entry of entries) {
console.log(entry.contentRect.width);
}
});
ro.observe(element);支持： 现代浏览器，广泛可用。
IntersectionObserver
检测元素何时进入或离开视口，非常适用于无限滚动、懒加载和基于滚动的动画。
const io = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Visible!');
}
});
});
io.observe(element);支持: 所有现代浏览器。
AbortController
使用干净且可扩展的模式取消 fetch 请求以及其他可中止的 API（例如，流、事件监听器）。
const controller = new AbortController();
fetch(url, { signal: controller.signal })
.catch(err => {
if (err.name === 'AbortError') console.log('Fetch aborted');
});
// later
controller.abort();支持： 所有现代浏览器。
IdleDetector
检测用户（或设备）何时处于空闲状态，以实现自动注销、“离开”状态或后台优化。
const detector = new IdleDetector();
await detector.start();
detector.addEventListener('change', () => {
console.log(detector.userState); // "active", "idle", etc.
});支持： 主要在基于 Chromium 的浏览器上可用；需要用户授权。
BroadcastChannel
Simple, multi‑tab communication without a server round‑trip.
const channel = new BroadcastChannel('app');
channel.postMessage('logout');
channel.onmessage = e => {
console.log(e.data);
};Support: Modern browsers (Safari added support later).
Web Locks API
在标签页之间协调共享资源，防止重复工作，例如对同一数据的多次获取。
navigator.locks.request('data-lock', async lock => {
await fetchData(); // only one tab runs this at a time
});支持: 主要是 Chromium；尚未普遍支持。
文件系统访问 API
为 Web 应用提供真实的文件系统功能——非常适合编辑器、导入/导出工具以及高级用户应用。
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();支持情况： 以 Chromium 为主的浏览器；在其他浏览器上支持有限。
结束语
这些 API 在现代浏览器中大多得到良好支持，但在正式使用前务必再次确认兼容性。了解它们的存在可以显著减少对第三方库的依赖，让代码库保持精简。
你最喜欢的、却鲜少被人提及的 Web API 是哪一个？
(如果你在今年四月身处意大利，欢迎参加我在 jsday.it 的 WebGPU + WASM 主题演讲。)