Новое в Chrome 107

Адриана Хара

Вот что вам нужно знать:

Я Адриана Хара . Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 107.

Новые свойства в API захвата экрана

В этой версии 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 , найдите ресурсы, блокирующие рендеринг, и оптимизируйте их.

Пробная версия происхождения API PendingBeacon

Декларативный API PendingBeacon позволяет браузеру контролировать отправку маяков.

Маяк — это пакет данных, отправляемый на внутренний сервер без ожидания конкретного ответа.

Приложения часто хотят отправить эти маяки в конце посещения пользователя, но сейчас неподходящее время для выполнения этого вызова «отправки». Этот API делегирует отправку самому браузеру, поэтому он может поддерживать маяки при page unload или при page hide , без необходимости разработчику реализовывать вызовы отправки в нужное время.

Подпишитесь на пробную версию Origin , опробуйте API и отправьте отзыв, чтобы мы могли улучшить варианты использования.

И более!

Конечно, есть еще много всего.

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

дальнейшее чтение

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

Подписаться

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

Меня зовут Адриана Хара, и как только выйдет Chrome 108, я буду здесь, чтобы рассказать вам, что нового в Chrome!