本篇我們盤點(diǎn) 10 個(gè)被低估的 Web API。

其中一些可能是你的日常工具，但我敢肯定至少有幾個(gè)會(huì)讓你驚呼“等等等，瀏覽器竟然有這功能？！”

好了，廢話不多說(shuō)，讓我們開(kāi)始吧。

1. Structured Clone API——深拷貝

前端開(kāi)發(fā)一個(gè)經(jīng)典的面試題就是：

“你如何復(fù)制一個(gè)對(duì)象？”

現(xiàn)在它有了終極解決方案：

const copy = structuredClone(original);

• 支持 Map、Set、Date、Blob、File、ArrayBuffer
• 處理循環(huán)引用
• 不會(huì)克隆函數(shù)

瀏覽器支持：現(xiàn)代瀏覽器（Chrome、Firefox、Safari、Edge）

2. Performance API——性能測(cè)量

我們經(jīng)常談?wù)撔阅?，但有點(diǎn)時(shí)候，你就只是想確認(rèn)：“A 真的比 B 快嗎，還是我在過(guò)度設(shè)計(jì)？”

performance.mark("start");

// 要測(cè)量的代碼

performance.mark("end");
performance.measure("calc", "start", "end");

console.log(performance.getEntriesByName("calc"));

非常適合：

• 微基準(zhǔn)測(cè)試
• 檢查 Worker 或 WASM 是否值得使用
• 驗(yàn)證你的假設(shè)

瀏覽器支持：所有現(xiàn)代瀏覽器。

3. Page Visibility API——檢測(cè)標(biāo)簽頁(yè)是否活躍

檢測(cè)標(biāo)簽頁(yè)是否處于活動(dòng)狀態(tài)：

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    video.pause();
  }
});

說(shuō)實(shí)話：用戶會(huì)打開(kāi)你的應(yīng)用，然后切換標(biāo)簽頁(yè) 20 分鐘，或者 2 小時(shí)，甚至永遠(yuǎn)。

使用場(chǎng)景：

• 暫停視頻
• 停止輪詢
• 降低 CPU 使用率
• 獲得更準(zhǔn)確的分析數(shù)據(jù)

瀏覽器支持：所有現(xiàn)代瀏覽器。

4. ResizeObserver——觀察元素尺寸變化

終于可以觀察元素尺寸，而不僅僅是窗口尺寸：

const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log(entry.contentRect.width);
  }
});

ro.observe(element);

如果你曾經(jīng)構(gòu)建過(guò)響應(yīng)式組件、圖表或儀表板，那么這個(gè) API 就是你的救星。

瀏覽器支持：所有現(xiàn)代瀏覽器。

5. IntersectionObserver——元素可見(jiàn)性檢測(cè)

ResizeObserver 的兄弟 API，用于檢查元素是否在視口中：

const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log("可見(jiàn)了!");
    }
  });
});

io.observe(element);

非常適合：

• 無(wú)限滾動(dòng)
• 懶加載
• 滾動(dòng)動(dòng)畫(huà)

任何手動(dòng)實(shí)現(xiàn)過(guò)一次無(wú)限滾動(dòng)的人……都不想再做第二次

瀏覽器支持：所有現(xiàn)代瀏覽器。

6. AbortController——取消操作的統(tǒng)一方案

很多開(kāi)發(fā)者知道它可以用于 fetch，但它能取消的不僅僅是 fetch。

const controller = new AbortController();

fetch(url, { signal: controller.signal });

// 稍后
controller.abort();

你還可以用它來(lái)：

• 取消事件監(jiān)聽(tīng)器
• 取消流
• 取消任何可中止的 API

更棒的是：一個(gè) signal 可以取消多個(gè)操作。

瀏覽器支持：所有現(xiàn)代瀏覽器。

7. Idle Detection API——檢測(cè)用戶是否真的在

Page Visibility 告訴你標(biāo)簽頁(yè)是否活躍。Idle Detection 告訴你用戶是否活躍：

const detector = new IdleDetector();

await detector.start();

detector.addEventListener("change", () => {
  console.log(detector.userState);
});

意思是：用戶可能打開(kāi)了你的應(yīng)用……但實(shí)際上正在泡咖啡或開(kāi)會(huì)。

使用場(chǎng)景：

• 自動(dòng)登出
• “離開(kāi)”狀態(tài)
• 后臺(tái)優(yōu)化

是的，你可以檢測(cè)用戶是否離開(kāi)了電腦。有點(diǎn)詭異，但非常有用

瀏覽器支持：主要是基于 Chromium 的瀏覽器。需要權(quán)限。

8. BroadcastChannel API——多標(biāo)簽頁(yè)通信

簡(jiǎn)單的多標(biāo)簽頁(yè)通信：

const channel = new BroadcastChannel("app");

channel.postMessage("logout");

channel.onmessage = (e) => {
  console.log(e.data);
};

非常適合：

• 登出同步
• 認(rèn)證狀態(tài)
• 共享會(huì)話邏輯

在用戶“以防萬(wàn)一”打開(kāi) 5 個(gè)標(biāo)簽頁(yè)的真實(shí)應(yīng)用中非常實(shí)用。

瀏覽器支持：現(xiàn)代瀏覽器。Safari 加入較晚但已支持。

9. Web Locks API——跨標(biāo)簽頁(yè)資源鎖

BroadcastChannel 的表親，防止跨標(biāo)簽頁(yè)的重復(fù)工作：

navigator.locks.request("data-lock", async (lock) => {
  await fetchData();
});

非常適合：

• 只有一個(gè)標(biāo)簽頁(yè)獲取通知
• 避免后端請(qǐng)求泛濫
• 協(xié)調(diào)共享資源

瀏覽器支持：主要是 Chromium。不是通用支持。

10. File System Access API——真正的文件系統(tǒng)訪問(wèn)

是的——從瀏覽器直接訪問(wèn)真實(shí)的文件系統(tǒng)：

const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();

非常適合：

• Web 編輯器
• 導(dǎo)入/導(dǎo)出工具
• 高級(jí)用戶應(yīng)用

瀏覽器支持：主要是 Chromium。其他瀏覽器支持有限。

支持度

這些 API 有些在現(xiàn)代瀏覽器中已經(jīng)很好的支持，有些（Idle Detection、File System Access、Web Locks）仍然主要集中在 Chromium 上。

所以在全面采用之前，一定要檢查兼容性。

但僅僅是知道這些存在，已經(jīng)讓你領(lǐng)先一步了。

到此這篇關(guān)于一文分享10個(gè)被低估的JavaScript Web API的文章就介紹到這了,更多相關(guān)JavaScript Web API內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論