等等，浏览器竟然有这功能？！10 个被低估的 Web API

冴羽
0 阅读4分钟

本篇我们盘点 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 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。

avatar
文章
阅读
粉丝