分享 20 個(gè) 2025 年依舊「少人知道、卻能立竿見(jiàn)影」的原生 API。
收藏 = 省下一個(gè)工具庫(kù) + 少寫 100 行代碼！
1. ResizeObserver
精準(zhǔn)監(jiān)聽(tīng)任意 DOM 寬高變化，圖表自適應(yīng)、虛擬滾動(dòng)必備。
new ResizeObserver(([e]) => chart.resize(e.contentRect.width)) .observe(chartDom);2. IntersectionObserver
檢測(cè)元素進(jìn)出視口，一次搞定懶加載 + 曝光埋點(diǎn)，性能零損耗。
new IntersectionObserver(entrieList => entrieList.forEach(e => e.isIntersecting && loadImg(e.target))).observe(img);3. Page Visibility
偵測(cè)標(biāo)簽頁(yè)隱藏，自動(dòng)暫停視頻、停止輪詢，移動(dòng)端省電神器。
document.addEventListener('visibilitychange', () => document.hidden ? video.pause() : video.play());4. Web Share
一鍵喚起系統(tǒng)分享面板，直達(dá)微信、微博、Telegram，需 HTTPS。
navigator.share?.({ title: '好文', url: location.href });5. Wake Lock
鎖定屏幕常亮，直播、PPT、閱讀器不再自動(dòng)息屏。
await navigator.wakeLock.request('screen');6. Broadcast Channel
同域標(biāo)簽實(shí)時(shí)廣播消息，登錄態(tài)秒同步，告別 localStorage 輪詢。
const bc = new BroadcastChannel('auth');bc.onmessage = () => location.reload();7. PerformanceObserver
無(wú)侵入采集 FCP、LCP、FID，一行代碼完成前端性能監(jiān)控。
new PerformanceObserver(list => list.getEntries().forEach(sendMetric)).observe({ type: 'largest-contentful-paint', buffered: true });8. requestIdleCallback
把埋點(diǎn)、日志丟進(jìn)瀏覽器空閑時(shí)間，首幀零阻塞。
requestIdleCallback(() => sendBeacon('/log', data));9. scheduler.postTask
原生優(yōu)先級(jí)任務(wù)隊(duì)列，低優(yōu)任務(wù)后臺(tái)跑，主線程絲滑。
scheduler.postTask(() => sendBeacon('/log', data), { priority: 'background' });10. AbortController
隨時(shí)取消 fetch，路由切換不再舊請(qǐng)求競(jìng)態(tài)，兼容 100%。
const ac = new AbortController();fetch(url, { signal: ac.signal });ac.abort();11. ReadableStream
分段讀取響應(yīng)流，邊下載邊渲染，大文件內(nèi)存零爆漲。
const reader = response.body.getReader();while (true) { const { done, value } = await reader.read(); if (done) break; appendChunk(value);}12. WritableStream
逐塊寫入磁盤或網(wǎng)絡(luò)，實(shí)時(shí)保存草稿、上傳大文件更穩(wěn)。
const writer = stream.writable.getWriter();await writer.write(chunk);13. Background Fetch
PWA 后臺(tái)靜默下載，斷網(wǎng)恢復(fù)繼續(xù)，課程視頻提前緩存。
await registration.backgroundFetch.fetch('video', ['/course.mp4']);14. File System Access
讀寫本地真實(shí)文件，需用戶授權(quán)，Web IDE 即開即用。
const [fh] = await showOpenFilePicker();editor.value = await (await fh.getFile()).text();15. Clipboard
異步讀寫剪貼板，無(wú)需第三方庫(kù)，HTTPS 環(huán)境安全復(fù)制。
await navigator.clipboard.writeText('邀請(qǐng)碼 9527');16. URLSearchParams
解析、修改、構(gòu)造 URL 查詢串，告別手寫正則。
const p = new URLSearchParams(location.search);p.set('page', 2);history.replaceState({}, '', `?${p}`);17. structuredClone
深拷貝對(duì)象、數(shù)組、Map、Date，循環(huán)引用也能完美復(fù)制。
const copy = structuredClone(state);18. Intl.NumberFormat
千分位、貨幣、百分比一次格式化，國(guó)際化零配置。
new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }) .format(1234567); // ￥1,234,567.0019. EyeDropper
瀏覽器級(jí)吸管工具，像素級(jí)取色，設(shè)計(jì)系統(tǒng)直接調(diào)用。
const { sRGBHex } = await new EyeDropper().open();20. WebCodecs
原生硬解碼音視頻，4K 60 幀流暢播放，CPU 占用直降。
const decoder = new VideoDecoder({ output: frame => ctx.drawImage(frame, 0, 0), error: console.error});decoder.configure({ codec: 'vp09.00.10.08' });
