Новое в Chrome 122

Адриана Хара

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

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

API сегментов хранения.

API Storage Buckets обеспечивает большую степень детализации для лучшего управления постоянным хранилищем.

Традиционно, когда у пользователя заканчивается место на устройстве, данные, хранящиеся с помощью таких API, как IndexedDB или localStorage , теряются без возможности вмешательства пользователя. Один из способов сделать хранилище постоянным — использовать метод persist() интерфейса StorageManager. Однако этот метод запроса постоянного хранилища — все или ничего.

Основная идея API Storage Buckets — предоставить сайтам возможность создавать несколько сегментов хранения, при этом браузер может удалить каждый сегмент независимо от других сегментов. Таким образом, вы можете указать приоритет вытеснения, чтобы гарантировать, что наиболее ценные данные не будут удалены. Каждый сегмент хранилища может содержать данные, связанные с установленными API-интерфейсами хранилища, такими как IndexedDB и CacheStorage.

Посетите не все хранилища одинаковы: ознакомьтесь с сегментами хранения для получения более подробной информации и примеров кода, чтобы начать использовать сегменты хранения.

Улучшения DevTools на панели производительности

В Chrome 122 DevTools включены следующие улучшения на панели «Производительность» .

Во-первых, временная шкала в верхней части панели «Производительность» теперь позволяет вам устанавливать навигационные цепочки и переключаться между ними. Чтобы установить навигационную цепочку, выберите диапазон на временной шкале , наведите на него курсор и нажмите соответствующую кнопку масштабирования N мс . Вы можете создать несколько вложенных хлебных крошек подряд. Чтобы переключаться между уровнями масштабирования, щелкните соответствующую навигационную цепочку в верхней части временной шкалы . Посмотрите следующее видео, чтобы увидеть хлебные крошки в действии.

Также на Главной дорожке теперь есть инициаторы событий. Дорожка Performance > Main по умолчанию показывает стрелки, соединяющие инициаторов и следующие события, которые они вызвали.

  • Недействительность стиля или макета -> Пересчитать стили или макет
  • Запросить кадр анимации → Запущен кадр анимации
  • Запросить обратный вызов в режиме ожидания -> Обратный вызов в режиме ожидания
  • Установить таймер -> Таймер сработал
  • Создать WebSocket -> Отправить... и получить рукопожатие WebSocket или уничтожить WebSocket

Чтобы увидеть стрелки, найдите такое событие в трассировке и щелкните его.

Стрелка от запроса и срабатывание обратного вызова в режиме ожидания.

Дополнительные обновления DevTools см. в разделе «Что нового в DevTools 122» .

unsanitized вариант Async Clipboard API

При копировании и вставке с использованием API Async Clipboard unsanitized опция метода read() позволяет приложениям и веб-сайтам получать несанкционированный HTML. Если сайты не включают это свойство, чтение HTML из буфера обмена будет очищено.

По умолчанию при чтении типов MIME text/html с использованием асинхронного API вызывается дезинфицирующее средство для удаления содержимого из разметки HTML из соображений безопасности, а стили встраиваются в результирующий HTML. Это приводит к увеличению полезной нагрузки HTML и потере точности HTML-контента при его чтении веб-разработчиками или мобильными приложениями.

Вы можете увидеть разницу в выводе в следующем примере.

Вход:

<style>p { color: blue; }</style><p>Hello, World!</p>'

Продезинфицировано (по умолчанию):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

С unsanitized вариантом:

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

Посетите раздел «Разблокировка доступа к буферу обмена» , чтобы изучить основы API буфера обмена.

И более!

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

  • В CSS запросы контейнера с неподдерживаемыми функциями никогда не совпадают. Например, следующий запрос никогда не будет найден из-за неизвестной функции:
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() не влияет на объекты File, он удаляет только объекты текстового типа.

  • С помощью drawingBufferStorage в WebGL вы можете избежать дополнительной копии при преобразовании рендеринга в формат пикселей буфера рисования по умолчанию и рисовать контент с точностью более 8 бит.

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

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

Подписаться

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

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