🔧 阿川の電商水電行
網路平台的功能遠比大多數開發者意識到的要強大得多——而且它每年都在悄悄獲得新的強大功能。
有時候，選擇文章主題比撰寫文章本身更難。
這週我在思考要寫些什麼的時候，腦海裡只浮現兩種想法：
要嘛是那種可能爆款的，要嘛是那種深度技術分析。 😅 但我想要一些輕鬆一點的。還是要有技術性，仍然要實用。但不要那種需要花三天時間研究的無底洞。
因為我真心喜歡探索瀏覽器能做什麼（以及我們能把它推向什麼程度），所以我找到了一個巧妙的話題：未充分利用的 Web API 。
有些東西可能是你的日常必需品。
但我很確定，至少有些人會讓某些人驚呼“等等，這東西居然存在？！” 😉
如果你對前沿技術主題感興趣，而且今年四月正好在意大利——歡迎來參加jsday.it ，我會在那裡講解 WebGPU + WASM 🙂
好了，介紹就到此為止。我們開始吧。
以下是 10 個值得更多關注的瀏覽器 API。
1) 結構化克隆 API
我對這個角色真是又愛又恨。
多年來，我最喜歡問應徵者的問題之一是：
如何複製一個物件？
你可以從答案中學到很多：
-
他們能理解參考文獻嗎？
-
他們了解
Object.assign、展開運算子和 JSON 技巧嗎？ -
他們提到圖書館了嗎？
-
他們會驚慌失措嗎？ 😄
現在？
const copy = structuredClone(original);完美深度複製。
我內心深處感到一絲欣慰。
我有點想念那個面試問題了。
不錯的額外福利
-
支援
Map、Set、Date、Blob、File和ArrayBuffer類型。 -
處理循環引用（不再出現 JSON 字串化錯誤💥）
-
不克隆函數
支援：主流瀏覽器（Chrome、Firefox、Safari、Edge）。可安全用於生產環境。
2) 效能 API
被嚴重低估了。
我們經常討論效能問題。我們安裝工具。我們執行 Lighthouse。我們探討優化方案。
但有時候你只是想確認一下：
“A 真的比 B 快嗎？還是我設計得太複雜了？”
performance.mark("start");
// code to measure
performance.mark("end");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("calc"));非常適合：
-
微基準測試
-
檢查 Worker 或 WASM 是否值得
-
檢驗你的假設是否符合現實
因為有時候「優化版」反而比較慢😅
支援：在所有現代瀏覽器上都表現出色。
3) 頁面可見性 API
偵測標籤頁是否處於活動狀態。
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
video.pause();
}
});說實話：
用戶打開你的應用程式後，會切換標籤頁 20 分鐘。
或2小時。
或者永遠。
使用案例：
-
暫停影片
-
停止輪詢
-
降低 CPU 使用率
-
更乾淨的分析
你的後端（和電池壽命）會感謝你的。
支援：所有現代瀏覽器。
4) ResizeObserver
最後——觀察元素大小，而不僅僅是視窗大小。
const ro = new ResizeObserver(entries => {
for (const entry of entries) {
console.log(entry.contentRect.width);
}
});
ro.observe(element);如果你曾經建立過響應式元件、圖表或儀表板，那麼你過去可能已經寫過一些糟糕的調整大小邏輯。
這個 API 給我的感覺就像瀏覽器在說：
“放鬆，有我在。”
支援：廣泛使用的現代瀏覽器。
5) 交叉路口觀察器
ResizeObserver 的同系產品。
檢查元素是否在視口內。
const io = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log("Visible!");
}
});
});
io.observe(element);非常適合：
-
無限滾動
-
懶加載
-
滾動動畫
任何曾經手動實現過無限滾動的人…
再也不想做第二次了😄
支援：所有現代瀏覽器。
6) 中止控制器
許多開發者都知道它是用於fetch的…
但它不僅可以取消 fetch 操作，還可以取消其他操作。
const controller = new AbortController();
fetch(url, { signal: controller.signal });
// later
controller.abort();您也可以將其用於：
-
事件監聽器
-
溪流
-
任何可中止的 API
更妙的是：
👉 一個訊號可以取消多個操作。
簡潔、可擴展，並且對「成熟的程式碼庫」非常友善。
支援：所有現代瀏覽器。
7) 空閒檢測 API
頁面可見性會告訴您該選項卡是否處於活動狀態。
空閒偵測功能會告訴您使用者是否處於活動狀態。
const detector = new IdleDetector();
await detector.start();
detector.addEventListener("change", () => {
console.log(detector.userState);
});意義：
用戶可能正在打開您的應用程式…
但實際上他正在煮咖啡☕或在開會。
使用案例：
-
自動登出
-
「離開」狀態
-
後台優化
是的，您可以偵測到使用者是否離開了電腦。
有點嚇人。不過非常實用😄
支援：主要基於 Chromium 核心。需要獲得許可。
8) 廣播頻道 API
輕鬆實現多標籤頁通訊。
const channel = new BroadcastChannel("app");
channel.postMessage("logout");
channel.onmessage = e => {
console.log(e.data);
};非常適合：
-
註銷同步
-
認證狀態
-
共享會話邏輯
在實際應用程式中，使用者為了「以防萬一」會開啟 5 個標籤頁，這齣奇地實用。
支援：主流瀏覽器。 Safari 瀏覽器雖然加入支援行列，但也支援此功能。
9) Web Locks API
BroadcastChannel 的同門兄弟。
防止跨標籤頁重複工作。
navigator.locks.request("data-lock", async lock => {
await fetchData();
});例子：
-
只有一個標籤頁會取得通知
-
避免後端垃圾郵件
-
協調共享資源
感覺很像「分散式系統與前端的結合」。
支援：主要支援 Chromium 內核，但並非所有內核都支援。
10) 檔案系統存取 API
是的－可以透過瀏覽器存取真正的檔案系統。
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();非常適合：
-
網路編輯
-
導入/匯出工具
-
進階用戶應用
第一次使用時，會覺得有點違法。
例如「我們真的可以在網路上做這種事嗎？」😄
支援：主要依賴鉻。其他方面支援有限。
現實檢驗🧠
許多此類 API 在現代瀏覽器中都得到了很好的支援。
但有些功能（空閒偵測、檔案系統存取、Web 鎖定）仍然是以 Chromium 為中心的。
所以在全面投入之前，務必先檢查相容性。
但僅僅是知道這些事物存在呢？
這已經讓你佔了優勢。
網路平台發展迅速。
有時，「新技術」並非框架，而是瀏覽器自帶的功能，它一直默默地存在於瀏覽器中。
你最喜歡的被低估但鮮為人知的 Web API 是什麼？
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
