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