Опубликовано: 28 июля 2026 г.
Выходит Chrome 151, и в этом посте мы расскажем о некоторых ключевых функциях этого релиза. Ознакомьтесь с полными примечаниями к выпуску Chrome 151 .
Основные моменты этого релиза:
- Элемент Capability
<usermedia>предоставляет декларативный, активируемый пользователем элемент управления для потоков с камеры и микрофона. - Декларативное назначение слотов в Shadow DOM позволяет веб-компонентам использовать ручное назначение слотов без императивного JavaScript.
- Метрики плавной навигации и производительности взаимодействия отслеживают задержку, вызванную взаимодействием, и изменения маршрута в одностраничных приложениях.
Элемент возможностей: <usermedia> MVP
Элемент <usermedia> — это последняя разработка в наборе Capability Elements, следующая за <geolocation> . Этот переход от первоначального предложения <permission> — части инициативы PEPC — позволяет браузеру более эффективно обрабатывать уникальные сложности и особенности поведения различных аппаратных возможностей. В то время как раннее предложение было сосредоточено в основном на управлении состояниями разрешений, такими как «разрешить» или «запретить», элементы Capability Elements функционируют как посредники данных.
Элемент <geolocation> предоставляет вашему сайту объект местоположения, а <usermedia> управляет всем процессом доступа к камере и микрофону. Он отслеживает намерения пользователя, управляет запросом браузера и передает объект MediaStream приложению. Такое изменение устраняет необходимость в отдельных вызовах getUserMedia() , упрощает реализацию и гарантирует, что браузер получает достоверный сигнал о намерениях пользователя.
Подробнее см. в разделе «Введение в HTML-элемент <usermedia> .
Декларативный теневой DOM: атрибут shadowrootslotassignment
В Chrome 151 добавлена поддержка атрибута shadowrootslotassignment для элементов <template> . Это позволяет создавать декларативные теневые корни, которые используют ручное назначение слотов непосредственно в вашем HTML-коде.
До сих пор ручное назначение слотов было доступно только в обязательном порядке. С этим обновлением вы можете указать параметр shadowrootslotassignment="manual" в шаблоне теневого корневого каталога.
Атрибут принимает named (поведение по умолчанию) и manual , и отражается свойством shadowRootSlotAssignment HTMLTemplateElement . Для получения более подробной информации см. документацию по HTMLTemplateElement.shadowRootSlotAssignment на MDN .
Этот атрибут уже доступен в Firefox и в бета-версии Safari 27, поэтому скоро станет доступен в базовой версии.
Мягкая навигация и метрики производительности взаимодействия
В Chrome 151 расширена шкала производительности веб-приложений за счет введения двух новых типов PerformanceEntry : soft-navigation и interaction-contentful-paint . Эти записи помогают разработчикам отслеживать производительность и задержку, обусловленные взаимодействием с пользователем, в одностраничных приложениях (SPA), дополняя уже существующие метрики Core Web Vitals, такие как Largest Contentful Paint (LCP) и Interaction to Next Paint (INP).
В одностраничных приложениях (SPA) переходы между маршрутами, управляемые JavaScript, не приводят к традиционной загрузке страницы браузером. Функция soft-navigation фиксирует изменения состояния в рамках истории изменений документа, инициированные взаимодействием пользователя. При мягкой навигации браузер устанавливает новую точку отсчета времени, что позволяет точно соотнести последующие данные о производительности с активным маршрутом SPA, а не с исходным URL-адресом документа.
Параметр interaction-contentful-paint измеряет количество новых отрисовок контента в областях DOM, измененных в результате взаимодействия пользователя. Это позволяет отслеживать задержку загрузки контента, даже если обновления контента зависят от асинхронных операций, таких как запросы fetch() .
Вы можете отслеживать эти новые записи в своем приложении с помощью PerformanceObserver . Следующий фрагмент кода выводит в консоль записи мягкой навигации, включая предыдущие мягкие навигации на этой странице с использованием опции буферизации:
const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });
Чтобы узнать больше о реализации и измерении навигации в SPA-приложениях, ознакомьтесь с документацией Soft navigations на Chrome для разработчиков .
Дополнительная информация
Здесь описаны лишь некоторые ключевые моменты. Дополнительные изменения в Chrome 151 можно найти по следующим ссылкам:
- Примечания к выпуску Chrome 151 .
- ChromeStatus.com обновляет Chrome до версии 151 .
- Календарь релизов Chrome .
Подписаться
Чтобы быть в курсе всех новостей, подпишитесь на YouTube-канал Chrome Developers , и вы будете получать уведомления по электронной почте каждый раз, когда мы выпускаем новое видео. Или подпишитесь на нас в X или LinkedIn, чтобы получать новые статьи и записи в блоге.
Как только выйдет Chrome 152, мы сразу же расскажем вам о новинках в Chrome!