Chrome 103 新功能

Pete LePage

以下是一些注意事項：

我是 Pete LePage讓我們深入瞭解 Chrome 103 中開發人員專屬的新功能。

HTTP 103 狀態碼 103 - 提早提示

使用資源提示是改善網頁效能的一種方法。這些資訊會向瀏覽器提供「提示」，說明日後可能需要的內容。例如預先載入檔案或連線至其他伺服器。

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

不過，除非伺服器傳送至少部分網頁，否則瀏覽器無法根據這些提示採取行動。

假設瀏覽器要求網頁，但伺服器需要幾百毫秒才能產生網頁。在瀏覽器開始接收網頁之前，這項作業會一直處於等待狀態。不過，如果伺服器知道網頁一律需要特定的子資源集合 (例如 CSS 檔案、部分 JavaScript 和少量圖片)，便可立即回應新的 HTTP 103 Early Hints 狀態碼，並要求瀏覽器預先載入這些子資源。

然後，伺服器產生頁面後，可透過一般 HTTP 200 回應傳送該網頁。網頁載入後，瀏覽器就會開始載入必要的資源。

這是新的 HTTP 狀態碼，因此您必須更新伺服器才能使用。

開始使用 HTTP 103 早期提示：

Local Font Access API

網站上的字型向來都是一大挑戰，尤其是允許使用者自行製作圖像和設計的應用程式。在此之前，網頁應用程式只能使用網路字型我們無法取得使用者在電腦上安裝的字型清單。而且，也無法存取完整的字型表資料，這對您須實作自訂文字堆疊而言至關重要。

新的 Local Font Access API 可讓網頁應用程式列舉使用者裝置上的本機字型，並提供字型表資料的存取權。

如要取得裝置上已安裝的字型清單，您必須先要求權限。

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

然後呼叫 window.queryLocalFonts()。系統會傳回使用者裝置已安裝的所有字型陣列。

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

如果您只想使用部分字型，可以新增 postscriptNames 參數來篩選字型。

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

如需完整詳細資料，請參閱 Tom 在 web.dev 上的文章「使用進階排版與本機字型」。

使用 AbortSignal.timeout() 更簡單的逾時時間

在 JavaScript 中，AbortController 和 AbortSignal 用於取消非同步呼叫。

舉例來說，在提出 fetch() 要求時，您可以建立 AbortSignal，並將其傳遞至 fetch()。如要在傳回前取消 fetch()，請在 AbortSignal 的例項上呼叫 abort()。目前為止，如果要在特定時間後取消，則必須在 setTimeout() 中納入。

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

所幸，您可以透過 AbortSignal 上新的 timeout() 靜態方法，輕鬆完成這項操作。它會傳回 AbortSignal 物件，該物件會在指定的毫秒數後自動中止。過去只有幾行程式碼 現在只是 1 行

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

Chrome 103 支援 AbortSignal.timeout()，Firefox 和 Safari 也已支援這項功能。

還有更多獎品等著您！

當然，還有更多功能。

  • 現在起，可透過網路分享功能分享 avif 圖片檔案格式
  • Chromium 會在網址變更後立即觸發 popstate，以便與 Firefox 進行比對。事件順序現在為：popstate，然後在兩個平台上執行 hashchange。
  • Element.isVisible() 則會指出元素是否顯示。

延伸閱讀

這份文件僅涵蓋部分重點。請參閱下方連結，瞭解 Chrome 103 中的其他異動。

訂閱

歡迎訂閱 Chrome Developers YouTube 頻道，即時掌握最新消息，每當我們推出新影片時，您都會收到電子郵件通知。

我是 Pete LePage，Chrome 104 一推出，我就會在這裡告訴你 Chrome 的新功能！