Chrome 107 的新变化

Adriana Jara

以下是您有必要知道的信息：

• Screen Capture API 中提供了一些新属性，以改善屏幕共享体验。
• 现在，您可以精确判断网页上的某个资源是否阻塞渲染。

• 现在，您可以使用一种在源试用中使用声明性 PendingBeacon API 将数据发送到后端服务器的新方法。还有更多精彩功能等您来体验。

• 还有许多更多内容。

我是 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 开发者工具的新变化 (107)
• Chrome 107 弃用和移除
• 针对 Chrome 107 的 ChromeStatus.com 更新
• Chromium 源代码库更改列表
• Chrome 发布日历

订阅

如需随时了解最新动态，请订阅 Chrome Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

我是 Adriana Jara