90% 的前端都没摸过的 20 个 JS 神级 API！

阅读量:55

2025-10-27 09:44:48

1. ResizeObserver：像素级「监听」元素尺寸

痛点：window.resize 只能监听视口，图表容器被 flex 布局偷偷撑开你却拿不到回调。
一行代码：

new ResizeObserver(entries => myChart.resize()).observe(document.querySelector('#chart'));

生产场景：ECharts、AntV 自适应、虚拟滚动条重算高度。
兼容：Chromium 64+、FF 69+、Safari 13.1+，polyfill 3 KB。

2. IntersectionObserver：懒加载 & 曝光埋点「零 JS」

痛点：手写滚动监听，一滚动就掉帧。
一行代码：

const io = new IntersectionObserver(([{isIntersecting}]) => {
  isIntersecting && sendExposure();
}, {threshold: 0.5});
io.observe(document.querySelector('#ad'));

生产场景：图片懒加载、视频自动播放、埋点曝光。
注意：rootMargin 支持 "50px 0px" 提前触发，做预加载神器。

3. Page Visibility：标签页切走，自动暂停一切

痛点：用户切后台，你的轮询 & 动画还在烧电。
一行代码：

document.addEventListener('visibilitychange', () => {
  document.hidden ? video.pause() : video.play();
});

生产场景：直播、游戏、轮询接口、WebSocket 心跳。
隐藏彩蛋：document.visibilityState 还能区分 "prerender"。

4. Web Share：「系统级分享」一呼百应

痛点：自己写分享面板，安卓 & iOS & PC 永远调不好。
一行代码：

navigator.share({title: '白皮书', text: '2025 前端趋势', url: location.href});

生产场景：H5 页一键分享到微信、Telegram、邮件。
注意：必须用户手势触发，HTTPS 下可用。

5. Wake Lock：让屏幕「常亮」

痛点：直播、PPT 演示 30 秒后自动息屏，老板以为你卡了。
一行代码：

const lock = await navigator.wakeLock.request('screen');

生产场景：直播、在线会议、车载中控 HMI。
隐藏彩蛋：页面可见性变化会自动释放，记得重新申请。

6. Broadcast Channel：同域标签页「微信群」

痛点：A 标签登录，B 标签 302 还在登录页。
一行代码：

new BroadcastChannel('login').postMessage({token});

生产场景：登录态同步、主题色切换、购物车合并。
注意：同域限制，跨域请用 localStorage + storage 事件。

7. PerformanceObserver：性能指标「无侵入」采集

痛点：手动算 FCP、LCP、FID 太麻烦。
一行代码：

new PerformanceObserver(list => {
  for (const entry of list.getEntries()) analytics.send(entry.name, entry.startTime);
}).observe({type: 'paint'});

生产场景：灰度发布性能回归、SLA 看板。
隐藏彩蛋：element 类型能拿到 LCP 具体 DOM。

8. requestIdleCallback：浏览器「闲时」偷偷干活

痛点：埋点、日志上传阻塞主线程，导致掉帧。
一行代码：

requestIdleCallback(() => sendLogs(), {timeout: 2000});

生产场景：非关键日志、预加载下一路由。
注意：React 18 的 startTransition 底层就是它。

9. scheduler.postTask：原生「优先级」队列

痛点：后台数据同步抢走了用户点击的算力。
一行代码：

scheduler.postTask(refreshData, {priority: 'background'});

生产场景：低优先级数据同步、预渲染。
隐藏彩蛋：支持 signal 与 AbortController 联动取消。

10. AbortController：fetch「取消」竞态

痛点：快速切换 Tab，旧请求后回来覆盖新数据。
一行代码：

const ctrl = new AbortController();
fetch(url, {signal: ctrl.signal});
ctrl.abort(); // 任意时机取消

生产场景：搜索框联想、路由切换清理。
隐藏彩蛋：同时能取消 ReadableStream、scheduler.postTask。

11. ReadableStream：大文件「流式」下载

痛点：1 GB 安装包一次性读进内存，Tab 直接崩。
一行代码：

const reader = response.body.getReader();
while (true) {
  const {done, value} = await reader.read();
  if (done) break;
  await writeChunk(value);
}

生产场景：断点续传、进度条。
隐藏彩蛋：配合 BYOB 能把内存占用再降 30%。

12. WritableStream：大文件「流式」上传

痛点：前端生成 500 MB CSV，直接 xhr.send(blob) 必崩。
一行代码：

const writer = (await fetch(url, {method: 'POST', body: stream})).body.getWriter();

生产场景：日志实时上传、SQLite 备份。
注意：需要服务端支持 Transfer-Encoding: chunked。

13. Background Fetch：PWA「断网续传」

痛点：用户下载到 99%，地铁进隧道，回来又要重下。
一行代码：

sw.registration.backgroundFetch.fetch('pkg', ['/1.zip', '/2.zip']);

生产场景：App Shell、游戏资源包。
隐藏彩蛋：系统通知栏自带进度，用户可暂停/继续。

14. File System Access：浏览器里「读写」本地文件

痛点：用户想保存 .psd，你只能给 .zip 下载。
一行代码：

const h = await window.showSaveFilePicker();
const w = await h.createWritable();
await w.write(blob);

生产场景：Web IDE、在线 Photoshop、Notion 本地备份。
注意：需要用户主动交互，HTTPS 下可用。

15. Clipboard：「异步」剪贴板

痛点：老派 document.execCommand('copy') 被 Chrome 废弃。
一行代码：

await navigator.clipboard.writeText('Hello, 2025!');

生产场景：代码编辑器、在线 Excel。
隐藏彩蛋：clipboard.read() 能读图片，做「一键去水印」神器。

16. URLSearchParams：告别「手写」正则

痛点：拼接参数总是漏 &、多 ?。
一行代码：

const p = new URLSearchParams({q: '前端', year: 2025});
console.log(p.toString()); // q=%E5%89%8D%E7%AB%AF&year=2025

生产场景：任意 GET 请求、分页跳转。
隐藏彩蛋：URLSearchParams 本身是可迭代对象，可以直接 for-of。

17. structuredClone：「深拷贝」循环引用

痛点：JSON.parse(JSON.stringify(obj)) 掉 function、Date、undefined。
一行代码：

const copy = structuredClone(original);

生产场景：Redux 巨型 Store、画板历史记录。
注意：支持 Map/Set/Blob/File，但不拷贝函数。

18. Intl.NumberFormat：「千分位 & 货币」一步到位

痛点：后端给 1234567.89，你要显示「￥ 123 万」。
一行代码：

new Intl.NumberFormat('zh-CN', {style: 'currency', currency: 'CNY'}).format(1234567);
// ¥1,234,567.89

生产场景：电商价格、股票行情。
隐藏彩蛋：unit: 'meter-per-second' 直接显示 5 m/s。

19. EyeDropper：浏览器级「吸管」

痛点：用户想在网页取色，你还要靠 Canvas 自己算像素。
一行代码：

const {sRGBHex} = await new EyeDropper().open();

生产场景：在线设计工具、主题色提取。
注意：需要用户手势触发，Chromium 95+。

20. WebCodecs：「原生硬解」4K 视频

痛点：H.265 10bit 在浏览器卡成 PPT。
一行代码：

const decoder = new VideoDecoder({output: frame => canvas.draw(frame), error: e => console.error(e)});
decoder.configure({codec: 'hvc1.1.6.L120.90'});