还在为项目依赖臃肿而烦恼？其实浏览器早已内置了大量强大API，学会它们，轻松告别第三方库！

🚀 性能优化组

1. ResizeObserver
精准监听DOM尺寸变化，图表自适应、虚拟滚动轻松实现

new ResizeObserver(([e]) => chart.resize(e.contentRect.width))
  .observe(chartDom);

2. IntersectionObserver
元素进入视口自动触发，懒加载+曝光埋点一箭双雕

new IntersectionObserver(entries => 
  entries.forEach(e => e.isIntersecting && loadImg(e.target))
).observe(img);

3. PerformanceObserver
无侵入性能监控，FCP、LCP等核心指标一手掌握

new PerformanceObserver(list => 
  list.getEntries().forEach(sendMetric)
).observe({type: 'largest-contentful-paint', buffered: true});

4. requestIdleCallback
闲时执行任务，埋点日志再也不阻塞首屏渲染

requestIdleCallback(() => sendBeacon('/log', data));

💫 用户体验组

5. Web Share API
一键唤起系统分享面板，微信、微博直达

navigator.share?.({ title: '好文', url: location.href });

6. Wake Lock
屏幕常亮锁定，直播、PPT告别自动息屏

await navigator.wakeLock.request('screen');

7. EyeDropper
浏览器级取色器，像素级精准吸色

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

8. Page Visibility
标签页隐藏检测，视频自动暂停省电又贴心

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

🔧 数据处理组

9. Broadcast Channel
同源标签页实时通信，登录态同步so easy

const bc = new BroadcastChannel('auth');
bc.onmessage = () => location.reload();

10. AbortController
请求随时取消，路由切换竞态问题彻底解决

const ac = new AbortController();
fetch(url, { signal: ac.signal });
ac.abort(); // 想取消就取消

11. structuredClone
真正深拷贝，循环引用也不在话下

const copy = structuredClone(complexObj);

12. URLSearchParams
URL查询参数解析，正则表达式可以退休了

const p = new URLSearchParams(location.search);
p.set('page', 2);
history.replaceState({}, '', `?${p}`);

💾 文件流操作组

13. File System Access
直接读写本地文件，Web IDE即开即用

const [fh] = await showOpenFilePicker();
const content = await (await fh.getFile()).text();

14. Clipboard API
安全剪贴板操作，复制邀请码零依赖

await navigator.clipboard.writeText('邀请码 9527');

15. ReadableStream
流式读取响应，大文件边下边看内存不爆

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

16. Background Fetch
PWA后台下载，断网续传不是梦

await registration.backgroundFetch.fetch('video', ['/course.mp4']);

🛠 进阶工具组

17. Intl.NumberFormat
国际化数字格式化，货币百分比一键搞定

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

18. scheduler.postTask
原生优先级任务调度，低优任务自动后台执行

scheduler.postTask(() => sendBeacon('/log', data), { 
  priority: 'background' 
});

19. WebCodecs
硬解码音视频，4K 60帧流畅播放CPU直降

const decoder = new VideoDecoder({
  output: frame => ctx.drawImage(frame, 0, 0),
  error: console.error
});

20. WritableStream
逐块写入数据，大文件上传稳定可靠

const writer = stream.writable.getWriter();
await writer.write(chunk);

这些原生API不仅性能优异，更能大幅减少包体积。收藏本文，下次项目需求时翻出来看看，也许就能少安装一个依赖！