有了這 20 個 JS 原生 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.0018. 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不僅性能優異,更能大幅減少包體積。收藏本文,下次項目需求時翻出來看看,也許就能少安裝一個依賴!

























