Published: July 28, 2026
Chrome 151 现已推出,本文将介绍此版本的一些主要功能。阅读完整的 Chrome 151 版本说明。
此版本的亮点:
- 功能元素
<usermedia>提供了一个声明式、用户激活的控件,用于控制摄像头和麦克风流。 - 借助声明式 shadow DOM 插槽分配,Web 组件可以使用手动插槽分配,而无需使用命令式 JavaScript。
- 软导航和互动性能指标可跟踪单页应用中由互动驱动的延迟时间和路由更改。
功能元素:<usermedia> MVP
<usermedia> 元素是功能元素套件中最新推出的元素,紧随 <geolocation> 之后。这种从原始 <permission> 提案(PEPC 计划的一部分)的转变,让浏览器能够更有效地处理不同硬件功能的独特复杂性和行为。虽然早期提案主要侧重于管理权限状态(例如允许与拒绝),但功能元素充当数据中介。
<geolocation> 元素会向您的网站提供位置对象,而 <usermedia> 则管理摄像头和麦克风访问的整个流程。它会捕获用户意图、管理浏览器提示,并将 MediaStream 对象传递给应用。这种转变消除了对单独 getUserMedia() 调用的需求,简化了实现,并确保浏览器拥有用户意图的可信信号。
如需了解详情,请参阅推出 <usermedia> HTML 元素。
声明式 shadow DOM:shadowrootslotassignment 属性
Chrome 151 在 <template> 元素中添加了对 shadowrootslotassignment 属性的支持。这样,您就可以直接在 HTML 中构建使用手动插槽分配的声明式 shadow 根。
到目前为止,手动插槽分配只能以命令式方式使用。通过此更新,您可以在 shadow 根模板上指定 shadowrootslotassignment="manual"
该属性接受 named(默认行为)和 manual,并由 HTMLTemplateElement 上的 shadowRootSlotAssignment 属性反映。如需了解详情,请参阅 MDN 上的 HTMLTemplateElement.shadowRootSlotAssignment 文档。
此属性已在 Firefox 和 Safari 27 Beta 版中提供,因此很快就会成为 Baseline Newly available。
软导航和互动性能指标
Chrome 151 通过引入两种新的 PerformanceEntry 类型(soft-navigation 和 interaction-contentful-paint)扩展了 Web 性能时间轴。这些条目有助于开发者跟踪单页应用 (SPA) 中由互动驱动的性能和延迟时间,并以 Largest Contentful Paint (LCP) 和 Interaction to Next Paint (INP) 等已确立的 Core Web Vitals 指标为基础。
在 SPA 中,由 JavaScript 驱动的路由转换不会触发传统的浏览器网页加载。soft-navigation 条目会捕获由用户互动发起的这些同文档历史记录状态更改。发生软导航时,浏览器会建立新的时间来源,让您能够准确地将后续性能数据归因于活跃的 SPA 路由,而不是初始文档网址。
interaction-contentful-paint 条目用于衡量用户互动修改的 DOM 区域内的新内容绘制。这样,即使内容更新依赖于异步操作(例如 fetch() 请求),也能了解互动加载延迟时间。
您可以使用 PerformanceObserver 在应用中观察这些新条目。以下代码段会将软导航条目记录到控制台,包括使用缓冲选项在此页面上的先前软导航:
const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });
如需详细了解如何实现和衡量 SPA 导航,请参阅 Chrome for Developers 上的软导航文档。
深入阅读
本文仅介绍了一些主要亮点。如需了解 Chrome 151 中的其他更改,请查看以下链接:
- Chrome 151 的版本说明。
- Chrome 151 的 ChromeStatus.com 更新。
- Chrome 发布日历。
订阅
如需及时了解最新动态,请订阅 Chrome 开发者 YouTube 频道,这样每当我们发布新视频时,您都会收到 电子邮件通知。或者,您也可以在 X 或 LinkedIn 上关注我们,获取新文章和博文。
Chrome 152 发布后,我们会立即在此处告知您 Chrome 的新功能!