本頁面由 Cloud Translation API 翻譯而成。

Chrome 103 新功能

Pete LePage

以下是一些注意事項：

有新的 HTTP 103 狀態碼，可協助瀏覽器在網頁尚未開始的情況下，判斷要預先載入的內容。
Local Font Access API 可讓網頁應用程式列舉及使用使用者電腦上安裝的字型。
AbortSignal.timeout() 是針對非同步 API 實作逾時的更簡單方法。
還有更多應用程式。

我是 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 早期提示狀態碼回應，並要求瀏覽器預先載入這些子資源。

接著，伺服器產生網頁後，便可透過一般 HTTP 200 回應傳送該網頁。進入頁面後，瀏覽器已經開始載入必要資源。

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

開始使用 HTTP 103 早期提示：

本機字型存取 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 的「使用進階字體排版搭配本機字型」一文。

使用 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 物件，並在指定毫秒數後自動取消。過去只有幾行程式碼，現在只是單行程式碼而已。

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

Chrome 103 支援 AbortSignal.timeout()，且已在 Firefox 和 Safari 中。

還有更多獎品等著您！

當然還有許多其他東西。

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

注意：在影片中，我提到 Element.isVisible() 目前仍在穩定階段，但目前只能在功能旗標後方使用。

其他資訊

這僅涵蓋部分重點功能。如要瞭解 Chrome 103 的其他變更，請點選下方連結。

如要隨時掌握最新資訊，請訂閱 Chrome Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。

我是 Pete LePage。Chrome 104 推出後，我很樂意告訴您 Chrome 有什麼新功能！