分享 20
个 2025
年依旧「少人知道、却能立竿见影」的原生 API
。
收藏
= 省下一个工具库
+ 少写 100
行代码!
1. ResizeObserver
精准监听任意 DOM
宽高变化,图表自适应、虚拟滚动必备。
js
new ResizeObserver(([e]) => chart.resize(e.contentRect.width))
.observe(chartDom);
2. IntersectionObserver
检测元素进出视口,一次搞定懒加载
+ 曝光埋点
,性能零损耗。
js
new IntersectionObserver(entrieList =>
entrieList.forEach(e => e.isIntersecting && loadImg(e.target))
).observe(img);
3. Page Visibility
侦测标签页隐藏,自动暂停视频、停止轮询,移动端省电神器。
js
document.addEventListener('visibilitychange', () =>
document.hidden ? video.pause() : video.play()
);
4. Web Share
一键唤起系统分享面板,直达微信、微博、Telegram
,需 HTTPS
。
js
navigator.share?.({ title: '好文', url: location.href });
5. Wake Lock
锁定屏幕常亮,直播、PPT
、阅读器不再自动息屏。
js
await navigator.wakeLock.request('screen');
6. Broadcast Channel
同域标签实时广播消息,登录态秒同步,告别 localStorage
轮询。
js
const bc = new BroadcastChannel('auth');
bc.onmessage = () => location.reload();
7. PerformanceObserver
无侵入采集 FCP
、LCP
、FID
,一行代码完成前端性能监控。
js
new PerformanceObserver(list =>
list.getEntries().forEach(sendMetric)
).observe({ type: 'largest-contentful-paint', buffered: true });
8. requestIdleCallback
把埋点
、日志
丢进浏览器空闲时间,首帧零阻塞。
js
requestIdleCallback(() => sendBeacon('/log', data));
9. scheduler.postTask
原生优先级任务队列,低优任务后台跑,主线程丝滑。
js
scheduler.postTask(() => sendBeacon('/log', data), { priority: 'background' });
10. AbortController
随时取消 fetch
,路由切换不再旧请求竞态,兼容 100%
。
js
const ac = new AbortController();
fetch(url, { signal: ac.signal });
ac.abort();
11. ReadableStream
分段读取响应流,边下载边渲染,大文件内存零爆涨。
js
const reader = response.body.getReader();
while (true) {
const { done, value } = await reader.read();
if (done) break;
appendChunk(value);
}
12. WritableStream
逐块写入磁盘或网络,实时保存草稿、上传大文件更稳。
js
const writer = stream.writable.getWriter();
await writer.write(chunk);
13. Background Fetch
PWA
后台静默下载,断网恢复继续,课程视频提前缓存。
js
await registration.backgroundFetch.fetch('video', ['/course.mp4']);
14. File System Access
读写本地真实文件,需用户授权,Web IDE
即开即用。
js
const [fh] = await showOpenFilePicker();
editor.value = await (await fh.getFile()).text();
15. Clipboard
异步读写剪贴板,无需第三方库,HTTPS
环境安全复制。
js
await navigator.clipboard.writeText('邀请码 9527');
16. URLSearchParams
解析、修改、构造 URL
查询串,告别手写正则。
js
const p = new URLSearchParams(location.search);
p.set('page', 2);
history.replaceState({}, '', `?${p}`);
17. structuredClone
深拷贝
对象、数组、Map、Date,循环引用也能完美复制。
js
const copy = structuredClone(state);
18. Intl.NumberFormat
千分位
、货币
、百分比
一次格式化,国际化零配置。
js
new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' })
.format(1234567); // ¥1,234,567.00
19. EyeDropper
浏览器级吸管工具
,像素级取色,设计系统直接调用。
js
const { sRGBHex } = await new EyeDropper().open();
20. WebCodecs
原生硬解码音视频,4K 60
帧流畅播放,CPU
占用直降。
js
const decoder = new VideoDecoder({
output: frame => ctx.drawImage(frame, 0, 0),
error: console.error
});
decoder.configure({ codec: 'vp09.00.10.08' });