Chrome 85 版的新功能

Pete LePage

Chrome 85 穩定版現已推出。

以下是一些注意事項：

我是 Pete LePage，在家工作和拍攝影片。讓我們深入瞭解 Chrome 85 為開發人員帶來哪些新功能！

內容瀏覽權限

瀏覽器算繪程序

如要將 HTML 轉換為使用者可見的內容，瀏覽器必須先完成多個步驟，才能繪製第一個像素。而且會針對整個網頁執行這項操作，即使是可視區域中未顯示的內容也一樣。

將 content-visibility: auto 套用至元素，可告知瀏覽器略過該元素的算繪作業，直到捲動至可視區域為止，進而加快初始算繪速度。


.my-class {
  content-visibility: auto;
}

如要充分發揮 content-visibility 的影響力，請將其套用至具有更複雜版面配置演算法的父項區段，例如 flexbox 和 grid，或是具有自有內含版面配置的子項。

將內容分塊並加入 content-visibility: auto; 後，這個網頁的轉譯時間從 232 毫秒縮短至 30 毫秒。

請參閱內容可見度，瞭解如何運用這項功能提升算繪效能。

@property 和 CSS 變數

CSS 變數 (技術上稱為自訂屬性) 非常實用。透過 Houdini CSS 屬性和值 API，您可以為自訂屬性定義類型和預設備援值。我先前在「Chrome 78 新功能」中介紹過這些功能，當時我們新增了在 JavaScript 中定義這些功能的功能。

從 Chrome 85 開始，您也可以直接在 CSS 中定義及設定 CSS 屬性。我喜歡 CSS 屬性，因為它賦予屬性語意意義、備用值，甚至還能進行 CSS 測試。

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una 有一篇很棒的貼文 @property：賦予 CSS 變數超能力 ，說明如何使用這些變數。

取得已安裝的相關應用程式

getInstalledRelatedApps() API 可讓您檢查您的應用程式是否已安裝，然後自訂使用者體驗。

舉例來說，如果使用者已安裝應用程式，到達網頁上顯示的內容就應有所不同。將重疊功能集中在一個應用程式中，避免混淆。或者，如果已安裝原生應用程式，請勿宣傳 PWA 安裝作業。

這項功能首次在 Chrome 80 中推出時，僅適用於 Android 應用程式。現在，Android 也可以檢查 PWA 是否已安裝。此外，在 Windows 上，這項功能可以檢查是否已安裝 Windows UWP 應用程式。

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

請參閱我的文章「應用程式是否已安裝？getInstalledRelatedApps()會告訴您！ 在 web.dev 上瞭解運作方式，以及如何簽署應用程式來證明應用程式屬於您。

應用程式圖示快速鍵

Windows 上的應用程式圖示捷徑

在 Chrome 84 中，我們新增了應用程式圖示捷徑的支援。我不小心說了這項功能適用於所有裝置，但其實只適用於 Android。現在，在 Chrome 85 中，這些功能已適用於 Android 和 Windows，以及 Chrome 和 Edge。


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

如需完整詳細資料，請參閱 web.dev 的「應用程式圖示捷徑」一文。很抱歉造成困擾。

來源試用：使用 fetch() 串流要求

自 Chrome 85 起，fetch 上傳串流功能將以原始碼試用版的形式推出。您可以在要求主體準備就緒前啟動擷取作業。先前，您必須準備好整個主體，才能開始提出要求。但現在，即使仍在生成內容，您也可以開始傳送內容。

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

舉例來說，您可以使用這項功能預熱伺服器，或串流從麥克風或攝影機擷取的音訊或影片。

Jake 在 web.dev 的「使用 Fetch API 串流要求」一文中深入探討了這項功能，並在最新的 HTTP203 - Streaming requests with fetch 影片中介紹了這項功能。

其他

當然，還有許多其他功能。

Promise.any 會傳回 Promise，該 Promise 會由第一個完成或遭拒的指定 Promise 實現。

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

使用 .replaceAll() 即可輕鬆取代字串中的所有例項，不必再使用規則運算式！

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 新增 AVIF 解碼支援，這是一種以 AV1 編碼的圖片格式，由開放媒體聯盟標準化。與 JPEG 和 WebP 相比，AVIF 的壓縮效果顯著提升。最近的 Netflix 研究顯示，與標準 JPEG 相比，AVIF 可節省 50% 的空間，而 4:4:4 內容則可節省超過 60% 的空間。

AppCache 移除作業也已開始。

延伸閱讀

這僅涵蓋部分重點。如要瞭解 Chrome 85 的其他異動，請參閱下方連結。

訂閱

如要隨時掌握我們的影片動態，請訂閱 Chrome 開發人員 YouTube 頻道，這樣每當我們發布新影片，你就會收到電子郵件通知。

我是 Pete LePage，我終於剪頭髮了！

Chrome 86 一推出，我會立即通知你 Chrome 的新功能！