Chrome 60 的新功能

  • 借助 Paint Timing API,您可以使用 Paint Timings AP 衡量首次渲染所用的时间和首次内容渲染所用的时间。
  • 通过 font-display,您可以控制字体在下载之前的呈现方式。
  • WebAssembly 已发布
  • 还有更多功能!

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

我是 Pete LePage。我们来深入了解一下 Chrome 60 中面向开发者的新功能!

Paint timings API

当用户浏览网页时,他们会寻找一些视觉反馈,以确保一切正常运行。借助新的绘制时间 API,我们现在可以衡量这一点。

该 API 公开了两个指标:

  • 首次绘制所用时间 - 标记浏览器开始渲染内容(屏幕上的第一个内容)的时间点。
  • 首次内容渲染所用时间 - 标记浏览器渲染 DOM、文本、图片等内容的第一点。

请参阅利用对用户体验影响最大的性能指标,了解如何跟踪这些指标并据以改进体验。

CSS font-display 属性

借助 Web 字体,您可以添加丰富的排版。但是,如果用户尚未安装该字体,则需要下载该字体,这可能会导致您的网站运行缓慢。

幸运的是,如果字体下载时间过长,大多数浏览器都会使用回退字体。借助新的 font-display 属性,您可以控制可下载字体在完全加载之前的呈现方式。

  • auto 会使用用户代理使用的任何字体显示策略。
  • block 会为字体样式分配短的屏蔽期和无限的换页期。
  • swap 会为字体样式设置零秒的块周期和无限的换页周期。
  • fallback 会为字体样式提供极小的块周期和较短的交换周期。
  • optional 会为字体样式提供极短的块周期和零秒的换页周期。

Chrome 60 和 Opera 支持该功能,Firefox 上的该功能正在开发中。 如需了解详情,请参阅使用 font-display 控制字体性能

WebAssembly

WebAssembly(也称为 wasm)提供了一种新的方式,可让您以接近原生速度在 Web 上运行使用 C 和 C++ 等语言编写的代码。

它可提供所需的速度,以便利用现有的基于标准的 Web 平台 API 构建浏览器内视频编辑器或以高帧速率运行 Unity 游戏。

您可以访问 webassembly.org 了解详情,包括演示、文档和入门指南。

等等!

  • 借助新的 Web Budget API,具有推送通知权限的网站可以发送数量有限的推送消息,这些消息会触发后台工作(例如同步数据或关闭通知),而无需显示可供用户查看的通知。
  • PushSubscription.expirationTime 现已推出,可在订阅到期时通知网站。
  • 现在支持 Object rest & spread 属性,这让合并和浅层克隆对象以及实现各种不可变对象模式变得更加简单。

注意Payment Request API 已推送到 Chrome 61。

以上仅列出了 Chrome 60 中针对开发者的部分变更。

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

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