Новое в Chrome 107

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" позволяет пользователям переключаться на новую вкладку, не возвращаясь к вкладке видеоконференции и не выбирая из длинного списка вкладок. Однако эта функция доступна условно, если веб-приложение ее не поддерживает.

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

Кроме того, MediaTrackConstraintSet добавляет свойство displaySurface. При вызове getDisplayMedia() браузер предлагает пользователю выбрать область показа: вкладку, окно или монитор. С помощью ограничения 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 и отправьте нам отзыв, чтобы мы могли улучшить варианты использования.

и многое другое!

Конечно, это далеко не все.

  • HTTP-заголовок expect-ct больше не поддерживается.
  • Атрибут rel теперь поддерживается в элементах <form>.
  • В прошлый раз я упоминал интерполяцию grid-template, в этот раз она должна быть включена.

Дополнительные сведения

Это лишь некоторые из основных моментов. Чтобы узнать о других изменениях в Chrome 107, перейдите по ссылкам ниже.

Подписаться

Чтобы не пропустить новые видео, подпишитесь на канал Chrome Developers в YouTube.

Меня зовут Адриана Хара. Как только выйдет Chrome 108, я расскажу вам о его новых функциях.