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 请求标头提供,并可通过客户端提示启用。如需深入了解,请查看示例并查看规范

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 撰写的 Introducing OpenType Variable Fonts

从 DOM 元素捕获媒体

现在,您可以使用 Media Capture from DOM Elements API,直接从 HTMLMediaElements 实时捕获内容(例如音频和视频)到 MediaStream

在 HTML 媒体元素上调用 captureStream() 后,您可以操控、处理、远程发送或录制流式内容。想象一下,您可以使用 Web Audio 来创建自己的均衡器或声码器。或者,使用 WebRTC 将内容流式传输到远程网站。可能性几乎无限。

部分 HTTP 网页显示“不安全”标签

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

等等!

当然,这只是 Chrome 62 中面向开发者的部分变更,还有许多其他变更。

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

我是 Pete LePage,Chrome 63 发布后,我会立即为您介绍 Chrome 中的新变化!