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() 后，浏览器会为用户提供显示途径选项：标签页、窗口或显示器。现在，Web 应用可以使用 displaySurface 限制条件向浏览器提示，让其更突出地显示某种界面类型。

例如，由于默认情况下可以共享单个标签页，因此有助于防止意外过度共享。

识别阻塞渲染的资源

可靠的网页性能数据分析对于开发者打造快速的用户体验至关重要，到目前为止，开发者一直依赖复杂的启发法来确定资源是否会阻塞渲染。

现在，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');

优化资源加载方式有助于改善 Core Web Vitals 并提供更好的用户体验。请参阅 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 开发者 YouTube 频道，这样，每当我们发布新视频时，您都会收到电子邮件通知。

我是 Adriana Jara，Chrome 108 发布后，我会在这里为您介绍 Chrome 的新变化！