90% 前端都不知道的 20 个「零依赖」浏览器原生能力!

分享 202025 年依旧「少人知道、却能立竿见影」的原生 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

无侵入采集 FCPLCPFID,一行代码完成前端性能监控。

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' });
相关推荐
lecepin几秒前
AI Coding 资讯 2025-09-25
前端·javascript·后端
前端_逍遥生8 分钟前
Vue3 响应式数据最佳实践速查表
前端·vue.js
KenXu14 分钟前
EMP微前端实现Vue2、Vue3、React各版本调用方案
前端
dreams_dream16 分钟前
Vue树选择
javascript·vue.js·elementui
xw517 分钟前
一文搞懂Flex弹性布局空间分配规则
前端·css·flexbox
云枫晖26 分钟前
手写Promise-静态方法reoslve和reject
前端·javascript
浮幻云月30 分钟前
让 Vue 动画如德芙般丝滑!这个 FLIP 动画组件绝了!
前端·javascript
吃饺子不吃馅39 分钟前
揭秘 X6 核心概念:Graph、Node、Edge 与 View
前端·javascript·svg
qwy71522925816340 分钟前
Vue中的Provide/Inject如何实现动态数据
前端·javascript·vue.js
艾小码40 分钟前
告别重复代码!React自定义Hook让逻辑复用如此简单
前端·javascript·react.js