Chrome 107 的新变化

Adriana Jara

以下是您需要知晓的相关信息：

我是 Adriana Jara。我们来深入了解一下 Chrome 107 中面向开发者的新功能。

Screen Capture API 中的新属性

在此版本中，Screen Capture API 添加了新属性，以改善屏幕共享体验。

DisplayMediaStreamOptions 添加了 selfBrowserSurface 属性。借助此提示，应用可以告知浏览器，在调用 getDisplayMedia() 时应排除当前标签页。

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

这有助于防止意外拍摄到自己，并避免出现视频会议中常见的“镜厅”效果。

DisplayMediaStreamOptions 现在还具有 surfaceSwitching 属性。此属性添加了一个选项，用于程序化控制 Chrome 在屏幕共享期间是否显示用于切换标签页的按钮。这些选项将传递给 getDisplayMedia()。借助 Share this tab instead 按钮，用户无需返回视频会议标签页或从长长的标签页列表中进行选择，即可切换到新标签页，但此行为会在 Web 应用无法处理时有条件地显示。

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

此外，MediaTrackConstraintSet 还会添加 displaySurface 属性。调用 getDisplayMedia() 后，浏览器会向用户提供显示 surface 的选项：标签页、窗口或显示器。通过使用 displaySurface 约束条件，Web 应用现在可以提示浏览器是否更希望以更显眼的方式提供其中一种 Surface 类型。

例如，它可以帮助防止意外过度分享，因为默认情况下只会分享一个标签页。 旧版和新版媒体选择器提示的屏幕截图。

识别会阻塞渲染的资源

准确了解网页性能对于开发者打造快速用户体验至关重要，但目前，开发者只能依赖复杂的启发词语来确定资源是否会阻塞呈现。

现在，Performance API 包含 renderBlockingStatus 属性，该属性可从浏览器提供直接信号，用于在资源下载之前识别阻止网页显示的资源。

以下代码段展示了如何获取所有资源的列表，以及如何使用新的 renderBlockingStatus 属性列出所有会导致呈现阻塞的资源。

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

优化资源加载方式有助于改善核心网页指标，并提供更好的用户体验，请参阅 MDN 文档，详细了解 Performance API，找出那些会阻塞渲染的资源并进行优化。

PendingBeacon API 源试用

借助声明式 PendingBeacon API，浏览器可以控制何时发送信标。

信标是发送到后端服务器的数据包，不期待特定响应。

应用通常希望在用户访问结束时发送这些信标，但没有合适的时间来进行“发送”调用。此 API 会将发送委托给浏览器本身，因此它可以支持 page unload 或 page hide 上的信标，而无需开发者在恰当的时间实现发送调用。

报名参加源代码试用，试用该 API，并向我们发送反馈，以便我们改进用例。

等等！

当然，还有许多其他功能。

  • expect-ct HTTP 标头已弃用。
  • <form> 元素现在支持 rel 属性。
  • 上次我提到了 grid-template 插值，这次应该要包含它。

深入阅读

本指南仅涵盖部分重要内容。如需了解 Chrome 107 中的其他变更，请点击以下链接。

订阅

如需及时了解最新动态，请订阅 Chrome 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Adriana Jara。Chrome 108 发布后，我会立即为您介绍 Chrome 中的新变化！