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