?90%前端沒摸過的 10 個(gè) JS 神 API？復(fù)制即用，今晚早下班

每個(gè) API 都附 瀏覽器支持率 + 30 秒上手代碼 + 真實(shí)業(yè)務(wù)場(chǎng)景，復(fù)制即用，今晚下班早！

1 Page Visibility API —— 頁面“隱身”探測(cè)

支持率： 97%（Chrome 13+、Edge 12+）
場(chǎng)景： 用戶切標(biāo)簽頁時(shí)暫停視頻、停止輪詢

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

2 Web Share API —— 一鍵喚起系統(tǒng)分享

支持率： 92%（需 HTTPS）
場(chǎng)景： 把當(dāng)前文章內(nèi)容分享到微信、微博

if (navigator.share) {  navigator.share({    title: '我的新文章',    text: '快來看看',    url: location.href,  });}

3 Broadcast Channel —— 跨標(biāo)簽頁通信

支持率： 94%（Chrome 54+）
場(chǎng)景： A 標(biāo)簽頁登錄，B 標(biāo)簽頁自動(dòng)刷新

const bc = new BroadcastChannel('login');bc.postMessage({ token: 'abc123' });bc.onmessage = (e) => console.log(e.data);

4 Intl.NumberFormat —— 一鍵千分位

支持率： 100%
場(chǎng)景： 價(jià)格、股票、報(bào)表格式化

new Intl.NumberFormat('zh-CN').format(1234567); // 1,234,567

5 IntersectionObserver —— 懶加載 + 曝光埋點(diǎn)

支持率： 97%（Chrome 51+）
場(chǎng)景： 圖片懶加載、廣告曝光統(tǒng)計(jì)

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

6 ResizeObserver —— 元素級(jí)尺寸監(jiān)聽

支持率： 94%（Chrome 64+）
場(chǎng)景： 響應(yīng)式圖表、虛擬滾動(dòng)

const ro = new ResizeObserver((entries) => {  entries.forEach((e) => console.log('尺寸變化', e.contentRect));});ro.observe(chartContainer);

7 Clipboard API —— 無依賴復(fù)制

支持率： 95%（需 HTTPS）
場(chǎng)景： 一鍵復(fù)制邀請(qǐng)碼、優(yōu)惠券碼

await navigator.clipboard.writeText('COUPON2025');

8 URLSearchParams —— 再也不用正則解析 query

支持率： 100%
場(chǎng)景： 路由、埋點(diǎn)、搜索參數(shù)

const params = new URLSearchParams(location.search);params.get('id'); // ?id=123

9 AbortController —— 可取消的 fetch

支持率： 100%
場(chǎng)景： 取消過期請(qǐng)求、防抖動(dòng)

const controller = new AbortController();fetch(url, { signal: controller.signal });controller.abort(); // 立即中斷

10 requestIdleCallback —— 主線程垃圾時(shí)間調(diào)度器

支持率： 95%（Chrome 47+、Edge 79+）
場(chǎng)景： 埋點(diǎn)、預(yù)加載、長(zhǎng)計(jì)算零阻塞

requestIdleCallback(() => {  // 在主線程空閑時(shí)執(zhí)行});

一鍵速查表（面試背）

把這張表貼在工位，下次寫功能先翻 3 秒，別再手寫輪詢 + 正則了！