Chrome 85 的新功能

Chrome 85 现已开始发布为稳定版。

以下是您有必要知道的信息:

我是 Pete LePage,在家工作和拍摄,下面来深入了解一下 Chrome 85 为开发者提供了哪些新功能!

内容公开范围

浏览器渲染过程

若要将您的 HTML 转换成用户可以看到的内容,浏览器需要执行一些步骤,然后才能绘制第一个像素。它会针对整个页面执行此操作,甚至针对视口中不可见的内容也是如此。

对某个元素应用 content-visibility: auto,以告知浏览器它可以跳过该元素的渲染工作,直到该元素滚动到视口内,从而加快初始渲染速度。


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

为了充分利用 content-visibility,请将其应用于采用更复杂布局算法(如 flexboxgrid)的父部分,或者将其应用于具有自己的包含布局的子项。

通过对内容进行分块并添加 content-visibility: auto;,该网页的呈现时间从 232 毫秒缩短到了只有 30 毫秒。

要了解如何使用它来提升渲染性能,请查看内容可见性

@property 和 CSS 变量

CSS 变量(技术上称为“自定义属性”)很棒。借助 Houdini CSS Properties and Values 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 支持 AndroidWindows 以及 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 上的使用提取 API 处理流式传输请求,还在最新的 HTTP203 - 使用提取方法流式传输请求视频中进行了介绍。

其他数据

当然还有很多其他功能。

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 编码并由开放媒体联盟标准化的图片格式。与 JPEG 和 WebP 相比,AVIF 的压缩率显著提升。最近的一项 Netflix 研究表明,与标准 JPEG 相比,AVIF 可节省 50% 以上的压缩量,4:4:4 的内容压缩率则超过 60%。

并且已开始移除 AppCache

深入阅读

这里仅介绍一些重要的亮点。如需了解 Chrome 85 中的其他变化,请点击以下链接。

订阅

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

我是 Pete LePage,我终于理了发!

Chrome 86 发布之后 我们会立即告诉您