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 - 使用 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 是一种由 Alliance for Open Media 标准化的图片格式，采用 AV1 编码。与 JPEG 和 WebP 相比，AVIF 可显著提高压缩率，Netflix 最近的一项研究显示，与标准 JPEG 相比，AVIF 可节省 50% 的空间，而对于 4:4:4 内容，则可节省 60% 以上的空间。

并且已开始移除 AppCache。

深入阅读

以上仅涵盖了部分重要亮点。如需了解 Chrome 85 中的其他变更，请点击以下链接。

订阅

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

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

Chrome 86 发布后，我会立即在此处告诉您 Chrome 中的新变化！