🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

小編精選 - 技術文章翻譯 · 02月23日

HTML 早已不是標籤了，現在它是系統級介面：這 9 個 API 直接幹翻常用 JS 函式庫

HTML 早已不是標籤了，它現在是系統級接口：這 9 個 API 直接幹翻常用 JS 庫

HTML 早已不再是簡單的“超文本標記”，它更像是一個連接底層硬體、瀏覽器內核與用戶交互的系統級接口集合。

在現代 Web 架構中，很多原本依賴龐大 JS 庫（如 jQuery, Axios, Socket.io）實現的功能，現在通過原生 HTML API 就能以更低的功耗和更高的性能完成。

一、 Popover API：零 JS 實現“浮層頂層化”

場景： 在監控儀表盤中，點擊“詳細指標”展示一個不被父容器 overflow: hidden 遮擋的浮窗。

HTML 實現：

<button popovertarget="metric-detail">查看詳情</button>
<div id="metric-detail" popover>
  <h4>即時指標詳情</h4>
  <p>CPU 負載: 85%</p>
</div>

底層幹貨： 它會自動進入瀏覽器的 Top Layer（頂層渲染層），層級永遠高於 z-index: 9999，且無需任何 JS 監聽點擊外部關閉的邏輯。

二、 Dialog API：受控的模態對話框

場景： 監控警報觸發時，彈出一個強制用戶交互的模態確認框。

HTML 與 JS 交互：

<dialog id="alarm-dialog">
  <form method="dialog">
    <p>確認關閉此警報？</p>
    <button value="cancel">取消</button>
    <button value="confirm">確認</button>
  </form>
</dialog>
<script>
  const dialog = document.getElementById('alarm-dialog');
  // 1. 彈出模態框：自帶背景遮罩 (::backdrop)
  dialog.showModal(); 
  // 2. 獲取結果：無需監聽按鈕點擊，直接監聽 close 事件
  dialog.addEventListener('close', () => {
    console.log('用戶選擇了：', dialog.returnValue); // 'confirm' 或 'cancel'
  });
</script>

三、 Speculation Rules API：讓頁面跳轉“瞬發”

場景： 監控首頁有很多鏈接通往“分析頁”，你預測用戶 80% 的概率會點第一個鏈接。

具體配置：

<script type="speculationrules">
{
  "prerender": [{
    "source": "list",
    "urls": ["/analysis/cpu-metrics"],
    "score": 0.8
  }]
}
</script>

工程意義： 這不是簡單的預加載，而是預渲染。瀏覽器會在後台開啟一個隱形標籤頁渲染目標頁面。當用戶點擊時，頁面切換時間趨於 0ms。

四、 View Transitions API：極致的 UI 平滑度

場景： 在監控系統中，從“列表視圖”切換到“詳情視圖”，希望卡片能有一個平滑的縮放位移動畫。

代碼實現：

function switchView() {
  // 1. 檢查瀏覽器支持
  if (!document.startViewTransition) {
    updateDOM(); // 降級處理
    return;
  }
  // 2. 開啟視圖轉換
  document.startViewTransition(() => {
    // 在回調函數中執行 DOM 變更
    updateDOM(); 
  });
}

CSS 配合：

.metric-card {
  view-transition-name: active-card;
}

原理： 瀏覽器會截取“舊狀態”和“新狀態”的快照，並自動在兩者之間創建位移、縮放和淡入淡出動畫。

五、 WebAssembly (Wasm) 與 JS 的零拷貝交互

場景： 監控系統中，前端需要實時計算成千上萬個點的趨勢。

具體用法：

import init, { calculate_metrics } from './analytics_bg.wasm';

async function run() {
  await init();
  const buffer = new SharedArrayBuffer(1024); // 使用共享記憶體
  const view = new Float64Array(buffer);
  // 直接把內存地址傳給 Wasm 處理，避免數據在大規模拷貝時的開銷
  const result = calculate_metrics(view);
}

工程價值： HTML 通過 Module 賦予了 Wasm 極高的集成度。對於計算密集型任務，這是 Node.js 或前端的終極提速手段。

六、 WebTransport API：HTTP/3 時代的實時通信

場景： 在你的監控系統中，如果有數萬台設備在毫秒級上報數據，WebSocket 的 TCP 隊頭阻塞（Head-of-Line Blocking）會導致延遲堆積。

具體用法：

// 建立基於 HTTP/3 QUIC 的連接
const transport = new WebTransport("https://metrics.your-server.com:443");
await transport.ready;

// 發送不可靠（雙向）流：適合對實時性要求極高、丟失一兩幀也沒關係的監控指標
const writer = transport.datagrams.writable.getWriter();
const data = new TextEncoder().encode(JSON.stringify({ cpu: 85 }));
await writer.write(data);

工程價值： 它基於 UDP，不僅比 WebSocket 更快，還支持多路復用。即使網絡波動，其中一個流卡住了，也不會影響其他流。

七、 Intersection Observer API (V2)：精準感知“真實可見性”

場景： 監控 SDK 的廣告反欺詐，或者極高性能的長列表渲染。

具體用法：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // isVisible 會檢測該元素是否被其他元素遮擋，或者是否有濾鏡/透明度導致看不見
    if (entry.isIntersecting && entry.isVisible) {
      sendMetric('element-real-view');
    }
  });
}, {
  trackVisibility: true, // 開啟真實可見性追蹤
  delay: 100 // 延遲檢測以減輕 CPU 壓力
});

observer.observe(targetNode);

工程價值： 它是實現“無感監控”的利器。相比於 V1，它能告訴你用戶是否真的看到了元素，而不僅僅是元素在視口內。

八、 Compression Streams API：瀏覽器原生無損壓縮

場景： 監控 SDK 在上報巨大的 JSON 日誌（如數 MB 的錯誤堆疊）前，先在前端進行壓縮。

具體用法：

async function compressAndSend(data) {
  const stream = new Blob([JSON.stringify(data)]).stream();
  const compressedStream = stream.pipeThrough(new CompressionStream('gzip'));

  // 這裡的 response 就是 Gzip 壓縮後的二進制流
  const response = await new Response(compressedStream).blob();
  navigator.sendBeacon('/log', response);
}

工程價值： 徹底拋棄 pako.js 等三方庫，減少了包體積，且利用瀏覽器原生能力，壓縮效率更高。

九、 File System Access API：把 Web 應用變成本地工具

場景： 開發一個本地離線日誌分析工具，直接讀取並保存用戶的 GB 級日誌文件。

具體用法：

async function openLogFile() {
  // 1. 獲取文件句柄
  const [handle] = await window.showOpenFilePicker();
  const file = await handle.getFile();

  // 2. 像 Node.js 一樣獲取可寫流
  const writable = await handle.createWritable();
  await writable.write("新日誌條目");
  await writable.close();
}