Chrome 85 现已开始发布为稳定版。
以下是您有必要知道的信息:
- 您可以使用
content-visibility: auto
提高渲染性能。 - 现在可以在 CSS 中设置 CSS 属性。
- 您现在可以使用
getInstalledRelatedApps()
检查您的 Windows 应用或 PWA 是否已安装。 - 应用图标快捷方式也适用于 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 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 上告知您!,了解其工作原理,以及如何为您的应用签名以证明应用归您所有。
应用图标快捷方式
在 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 上的使用提取 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%。
深入阅读
这里仅介绍一些重要的亮点。如需了解 Chrome 85 中的其他变化,请点击以下链接。
- Chrome 开发者工具的新变化 (85)
- Chrome 85 弃用和移除
- Chrome 85 版 ChromeStatus.com 更新
- Chrome 85 中的 JavaScript 的新变化
- Chromium 源代码库变更列表
订阅
如果您想及时了解我们视频的最新动态,请订阅我们的 Chrome Developers YouTube 频道。每当我们发布新视频时,您都会收到电子邮件通知。
我是 Pete LePage,我终于理了发!
Chrome 86 发布之后 我们会立即告诉您