Что нового в Chrome 123

В этом обзоре рассказываем об обновлениях браузера: CSS-функция light-dark(), API длинных кадров анимации, API статической маршрутизации сервисного работника.

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

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

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

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