Web平台比大部分开发者想象中强大得多——而且每年都在悄悄获得新能力。
有时候选题比写文章本身还难。
这周我在琢磨写什么的时候，脑子里只蹦出两种思路：要么是潜在爆款，要么是深度技术分析。😅 但我想来点轻松的。有技术含量，有实用性，但不是那种要研究三天的兔子洞。
既然我真心喜欢探索浏览器能干什么(以及能push到什么程度)，就选了个隐藏话题：被低估的Web API。
这些API有些可能是你的日常必备。但我敢说至少有几个会让人惊呼"等等，这玩意儿早就有了？！"😉
顺便说一句，如果你喜欢前沿技术话题，而且今年4月刚好在意大利——来jsday.it吧，我会在那讲WebGPU + WASM 🙂
好了，不废话了。开始吧。
这里有10个值得更多关注的浏览器API。
1) Structured Clone API
这个我是又爱又恨。
多年来，我最喜欢问面试者的问题之一就是：
"你怎么拷贝一个对象？"
从答案里能看出太多东西：
- 他们理解引用吗？
- 知道
Object.assign、展开运算符、JSON技巧吗？ - 会提到第三方库吗？
- 慌不慌？😄
现在呢？
javascript
const copy = structuredClone(original);
搞定。完美的深拷贝。
一方面我挺开心的。另一方面我有点怀念那个面试问题了。
额外好处
- 支持
Map、Set、Date、Blob、File、ArrayBuffer - 能处理循环引用(不会再有JSON.stringify爆炸💥)
- 不会克隆函数
浏览器支持：现代浏览器(Chrome、Firefox、Safari、Edge)。可以放心用在生产环境。
2) Performance API
非常被低估。
我们聊性能聊得很多。装各种工具。跑Lighthouse。辩论优化方案。
但有时候你就想知道："A到底比B快，还是我在过度工程化？"
javascript
performance.mark("start");
// 要测量的代码
performance.mark("end");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("calc"));
适合：
- 微基准测试
- 检查Worker或WASM值不值得用
- 检验你的假设是不是对的
因为有时候"优化后"的版本反而更慢😅
浏览器支持：所有现代浏览器都很好。
3) Page Visibility API
检测标签页是否激活。
javascript
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
video.pause();
}
});
实话说：用户会打开你的应用，然后切到别的标签页20分钟。或者2小时。或者永远。
用途：
- 暂停视频
- 停止轮询
- 降低CPU占用
- 更精准的数据统计
你的后端(和电池)会感谢你的。
浏览器支持：所有现代浏览器。
4) ResizeObserver
终于——能监听元素尺寸了，不只是窗口尺寸。
javascript
const ro = new ResizeObserver(entries => {
for (const entry of entries) {
console.log(entry.contentRect.width);
}
});
ro.observe(element);
如果你做过响应式组件、图表或仪表盘，可能写过一些诡异的resize逻辑。
这个API就像浏览器在说："放轻松，我搞定了。"
浏览器支持：现代浏览器，广泛可用。
5) IntersectionObserver
ResizeObserver的兄弟。
检查元素是否在可视区域内。
javascript
const io = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log("可见了！");
}
});
});
io.observe(element);
适合：
- 无限滚动
- 懒加载
- 滚动动画
手动实现过一次无限滚动的人……再也不想干第二次了😄
浏览器支持：所有现代浏览器。
6) AbortController
很多开发者知道它能用在fetch上……
但它能取消的不止fetch。
javascript
const controller = new AbortController();
fetch(url, { signal: controller.signal });
// 之后
controller.abort();
还能用在：
- 事件监听器
- 流
- 任何可中止的API
更棒的是：👉 一个signal可以取消多个操作。
干净、可扩展，非常"成熟代码库"友好。
浏览器支持：所有现代浏览器。
7) Idle Detection API
Page Visibility告诉你标签页是否激活。Idle Detection告诉你人是否活跃。
javascript
const detector = new IdleDetector();
await detector.start();
detector.addEventListener("change", () => {
console.log(detector.userState);
});
意思是：用户可能开着你的应用……但实际在泡咖啡☕或者开会。
用途：
- 自动登出
- "离开"状态
- 后台优化
是的，你能检测到用户离开了电脑。有点creepy。但很实用😄
浏览器支持：主要是基于Chromium的。需要权限。
8) BroadcastChannel API
简单的多标签页通信。
javascript
const channel = new BroadcastChannel("app");
channel.postMessage("logout");
channel.onmessage = e => {
console.log(e.data);
};
适合：
- 同步登出
- 认证状态
- 共享会话逻辑
在用户"以防万一"开5个标签页的实际应用中特别实用。
浏览器支持：现代浏览器。Safari后来也支持了。
9) Web Locks API
BroadcastChannel的表亲。
防止多个标签页重复工作。
javascript
navigator.locks.request("data-lock", async lock => {
await fetchData();
});
例子：
- 只让一个标签页拉取通知
- 避免轰炸后端
- 协调共享资源
感觉很"分布式系统遇上前端"。
浏览器支持：主要是Chromium。不是所有浏览器都支持。
10) File System Access API
没错——浏览器直接访问真实文件系统。
javascript
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
适合：
- Web编辑器
- 导入/导出工具
- 高级用户应用
第一次用的时候感觉有点像非法操作。好像"Web上真的能这么干？"😄
浏览器支持：主要是Chromium。其他浏览器支持有限。
现实检查🧠
这些API大部分在现代浏览器中都支持得很好。但有些(Idle Detection、File System Access、Web Locks)还是以Chromium为主。
所以全力投入之前一定要检查兼容性。
但光是知道这些存在？就已经让你领先一步了。
Web平台进化很快。有时候"新技术"不是框架——而是浏览器里一直静静躺着的原生功能。
原文出处： Stop Installing Libraries: 10 Browser APIs That Already Solve Your Problems
作者： Sylwia Laskowska
