Новое в Chrome 123

Адриана Хара

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

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

CSS-функция light-dark() .

Функция light-dark() в CSS позволяет создавать цвета, которые адаптируются к предпочтениям пользователя для светлого или темного режима . Используйте функцию light-dark() , чтобы указать два разных значения цвета в одном свойстве CSS.

Браузер автоматически выберет подходящий цвет на основе вычисленного значения color-scheme элемента. Например, с помощью следующего CSS:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • Если пользователь выбрал светлую тему, элемент будет иметь салатовый фон.
  • Если пользователь выбрал темную тему, элемент будет иметь зеленый фон.

API длинных кадров анимации.

Доступен API длинных кадров анимации, который поможет вам найти причины перегрузки основного потока, которая часто является причиной плохого INP ( взаимодействия с следующей отрисовкой ) — основного веб-важного показателя, который измеряет скорость реагирования веб-сайта.

Новый API представляет собой расширенную версию API длинных задач, которая обеспечивает лучшее понимание медленных обновлений пользовательского интерфейса. API длинных кадров анимации позволяет измерять работу блокировки. Он измеряет задачи вместе со следующим обновлением рендеринга и добавляет такую ​​информацию, как длительные сценарии выполнения, время рендеринга и время, затраченное на принудительное размещение и стиль, известное как изменение макета .

Сбор и анализ этой информации позволяет выявлять и устранять узкие места в производительности. Вы можете захватывать длинные кадры с помощью следующего кода.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

API статической маршрутизации сервисного работника.

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

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

С помощью API статической маршрутизации Service Worker во время установки вы можете объявить пути, которые всегда будут обслуживаться из сети. При последующей загрузке контролируемого URL-адреса браузер может начать извлечение ресурсов по этим путям до того, как сервис-воркер завершит запуск. Это удалит сервис-воркера из URL-адресов, которые, как вы знаете, не нуждаются в сервис-воркере.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

И более!

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

  • Вы можете предлагать настраиваемые страницы в зависимости от того, откуда пользователь перешел, с помощью интерфейса NavigationActivation .

  • Chrome теперь поддерживает Zstandard ( zstd ). Такое Content-Encoding помогает быстрее загружать страницы и использовать меньше пропускной способности, а также тратить меньше времени, ресурсов ЦП и мощности на сжатие на серверах, что приводит к снижению затрат на сервер.

  • API notRestoredReasons для bfcache выпускается из Chrome 123. Это позволяет владельцам сайтов собирать на местах причины, по которым bfcache невозможно было использовать. Владельцы сайтов могут использовать это для улучшения использования bfcache, что обеспечивает более быструю навигацию по истории.

  • Значение picture-in-picture для display-mode позволяет вам писать определенные правила CSS, которые применяются только тогда, когда веб-приложение отображается в режиме «картинка в картинке». Например:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

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

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

Подписаться

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

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