Chrome 85 版現已推出穩定版。
以下是一些注意事項:
- 您可以利用
content-visibility: auto
改善轉譯效能。 - CSS 資源現在可在 CSS 中設定。
- 您現在可以檢查 Windows 應用程式或 PWA 是否已使用
getInstalledRelatedApps()
安裝。 - 應用程式圖示快捷鍵也適用於 Windows (暫時同樣支援)。
- 已開始「
fetch
上傳串流」的來源試用。 - 以及其他方式。
我是 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 Properties 和 Values API,定義自訂屬性的類型和備用值。先前我們支援以 JavaScript 定義這些函式時,我曾提到 Chrome 78 版的新功能 介紹的相關內容。
從 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 顯示!
應用程式圖示捷徑
在 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,
});
舉例來說,您可以使用此 API 為伺服器暖機,或串流從麥克風或相機擷取的音訊或視訊。
Jake 將深入介紹 on web.dev 的使用擷取 API 串流要求,並在最新的「HTTP203 - 串流要求與擷取作業」影片中說明。
其他更新
當然,還有許多應用程式等著您。
Promise.any
會傳回承諾,如第一個指定承諾要完成或遭到拒絕。
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,AVIF 是採用 AV1 編碼的圖片格式,並由 Open Media 適用的聯盟進行標準化。近期的 Netflix 研究顯示,與 JPEG 和 WebP 相比,AVIF 可大幅提升壓縮效率。與標準 JPEG 相比,前者可省下 50% 的費用,更可省下 60% 的 4:4:4 內容。
其他資訊
這份文件僅涵蓋部分重點功能。請查看下方連結,瞭解 Chrome 85 版的其他異動。
- Chrome 開發人員工具的新功能 (85)
- Chrome 85 淘汰和移除
- ChromeStatus.com 為 Chrome 85 更新
- Chrome 85 版 JavaScript 新功能
- Chromium 來源存放區變更清單
訂閱
想要隨時掌握最新影片,並訂閱我們的 Chrome Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。
我是 Pete LePage,最後開始剪髮!
Chrome 86 推出後,我會在這裡通知您,Chrome 有哪些新功能!