Chrome 62 的新功能

以及更多功能

我是 Pete LePage。我们来深入了解一下,看看 Chrome 62 为开发者提供了哪些新功能!

想要查看更改的完整列表?查看 Chromium 源代码库变更列表

广告网络质量指标

Network Information API 已在 Chrome 中提供一段时间,但它仅会根据用户的连接提供理论网速。假设您已连接到 Wi-Fi,但连接的是速度仅为 2G 的移动网络热点,该 API 会报告 Wi-Fi!

console.log(navigator.connection.type);
> wifi

在 Chrome 62 中,该 API 已经过扩展,可提供来自客户端的实际网络性能指标。利用这些网络质量信号,您可以根据网络情况定制内容。例如,在连接速度非常慢时,您可以通过提供更低的版本来提高网页加载性能。

为了简化应用逻辑,该 API 会根据与移动网络连接的对比情况,返回测得的网络性能。例如,如果连接到超快速光纤连接,API 会报告 4G

console.log(navigator.connection.effectiveType);
> 4G

这些信号还将作为 HTTP 请求标头提供,并通过 Client Hints 启用。如需深入了解,请查看示例并查看spec

OpenType 变量字体

一直以来,一个字体只包含一个字体系列实例,例如一个粗细或一个拉伸。如果您希望使用常规、粗体和斜体,则需要添加三种单独的字体,从而增加网页的粗细。

OpenType 可变字体等效于可在单个字体文件中紧凑封装多个单独的字体。通过调整 font-variation-settings CSS 属性,可以轻松调整拉伸、样式、粗细等,提供无限数量的样式变体。这三种字体现在可以合并成一个紧凑的文件。

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

OpenType 可变字体为我们提供了一种功能强大的新工具,用于创建自适应排版,并缩减页面重量。如需了解详情,请查看 John Hudson 的 OpenType 变量字体简介

从 DOM 元素捕获媒体

借助来自 DOM Elements API 的媒体捕获,您现在可以直接从 HTMLMediaElements 将内容(如音频和视频)实时捕获MediaStream 中。

对 HTML 媒体元素调用 captureStream() 后,流式传输的内容可以被操纵、处理、远程发送或录制。想象一下,您可以使用网络音频创建自己的均衡器或声码器。或者,使用 WebRTC 将内容流式传输到远程网站。无限可能等待您去尝试。

某些 HTTP 网页的不安全标签

正如我们之前宣布的那样,从 Chrome 62 开始,当用户在 HTTP 网页上输入数据时,Chrome 会在地址栏中使用标签将该网页标记为“不安全”。在无痕模式下,系统也会在所有 HTTP 网页上显示此标签。

还有更多其他奖励!

以上只是我们针对开发者在 Chrome 62 中做出的一些改动,当然还有很多其他变化。

然后订阅我们的 YouTube 频道;每当我们发布新视频时,您都会收到电子邮件通知。

我是 Pete LePage