十個 JS 神 API？復制即用，今晚早下班
作者：林三心不學挖掘機
本文這些現(xiàn)代瀏覽器API極大提升了開發(fā)效率與用戶體驗，覆蓋了頁面生命周期管理、系統(tǒng)集成、性能優(yōu)化等關(guān)鍵場景，值得在現(xiàn)代Web項目中廣泛應用。
1. 監(jiān)聽頁面可見狀態(tài)
瀏覽器支持率：97%（Chrome 13+、Edge 12+）
典型場景：用戶切換瀏覽器標簽時自動暫停視頻播放、停止后臺數(shù)據(jù)輪詢
document.addEventListener('visibilitychange', () => {
document.visibilityState === 'hidden'
? video.pause()
: video.play();
});2. 調(diào)用系統(tǒng)原生分享功能
瀏覽器支持率：92%（要求 HTTPS 環(huán)境）
典型場景：移動端快速分享文章內(nèi)容至微信、微博等社交平臺
if (navigator.share) {
navigator.share({
title: '我的新文章',
text: '快來看看',
url: location.href,
});
}3. 實現(xiàn)同源標簽頁通信
瀏覽器支持率：94%（Chrome 54+）
典型場景：用戶在一個標簽頁完成登錄，其他同源標簽頁自動更新認證狀態(tài)
const bc = new BroadcastChannel('login');
bc.postMessage({ token: 'abc123' });
bc.onmessage = (e) => console.log(e.data);4. 智能數(shù)字格式化
瀏覽器支持率：100%
典型場景：金融場景中的價格展示、股票數(shù)據(jù)呈現(xiàn)、報表數(shù)字格式化
new Intl.NumberFormat('zh-CN').format(1234567); // 1,234,5675. 元素視口交叉檢測
瀏覽器支持率：97%（Chrome 51+）
典型場景：實現(xiàn)圖片懶加載機制、統(tǒng)計廣告內(nèi)容曝光次數(shù)
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => e.isIntersecting && loadImg(e.target));
});
io.observe(img);6. 監(jiān)聽元素尺寸變化
瀏覽器支持率：94%（Chrome 64+）
典型場景：響應式圖表重繪、虛擬滾動列表動態(tài)渲染
const ro = new ResizeObserver((entries) => {
entries.forEach((e) => console.log('尺寸變化', e.contentRect));
});
ro.observe(chartContainer);7. 現(xiàn)代化剪貼板操作
瀏覽器支持率：95%（要求 HTTPS 環(huán)境）
典型場景：實現(xiàn)邀請碼、優(yōu)惠券碼的一鍵復制功能
await navigator.clipboard.writeText('COUPON2025');8. 智能URL參數(shù)解析
瀏覽器支持率：100%
典型場景：路由參數(shù)獲取、埋點參數(shù)解析、搜索條件處理
const params = new URLSearchParams(location.search);
params.get('id'); // ?id=1239. 可控的網(wǎng)絡請求中斷
瀏覽器支持率：100%
典型場景：取消過期接口請求、實現(xiàn)搜索防抖優(yōu)化
const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // 立即中斷10. 利用瀏覽器空閑時間
瀏覽器支持率：95%（Chrome 47+、Edge 79+）
典型場景：非緊急任務調(diào)度（如數(shù)據(jù)埋點、資源預加載、復雜計算）
requestIdleCallback(() => {
// 在主線程空閑時執(zhí)行
});這些現(xiàn)代瀏覽器API極大提升了開發(fā)效率與用戶體驗，覆蓋了頁面生命周期管理、系統(tǒng)集成、性能優(yōu)化等關(guān)鍵場景，值得在現(xiàn)代Web項目中廣泛應用。
責任編輯：趙寧寧
來源：
前端之神
