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 变量赋予超级能力，其中介绍了如何使用 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 - 使用 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 的解码支持。AVIF 是一种使用 AV1 编码且由 Alliance for Open Media 标准化的图片格式。与 JPEG 和 WebP 相比，AVIF 可显著提高压缩率。最近的 Netflix 研究表明，与标准 JPEG 相比，AVIF 可将文件大小缩减 50%，对于 4:4:4 内容，可将文件大小缩减超过 60%。

AppCache 已开始移除。

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 85 中的其他变更，请点击以下链接。

订阅

如需及时了解我们的最新视频，请订阅我们的 Chrome Developers YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Pete LePage，我终于剪了头发！

一旦 Chrome 86 发布，我会立即向您介绍 Chrome 中的新变化！