有了這 20 個 JS 原生 API ，你可以不用裝第三方庫

作者：林三心不學挖掘機 2025-11-13 08:53:51

開發前端

還在為項目依賴臃腫而煩惱？其實瀏覽器早已內置了大量強大API，學會它們，輕松告別第三方庫！

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

還在為項目依賴臃腫而煩惱？其實瀏覽器早已內置了大量強大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不僅性能優異，更能大幅減少包體積。收藏本文，下次項目需求時翻出來看看，也許就能少安裝一個依賴！

責任編輯：武曉燕來源：前端之神

JS 原生API 性能