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

С помощью новой функции light-dark() можно адаптировать свою цветовую схему; диагностика отзывчивости сайта с помощью API Long Animation Frames; с помощью API статической маршрутизации Service Worker можно избегайте снижения производительности при запуске Service Worker

В этом обзоре рассказываем об обновлениях браузера: 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"
  });
});
Читайте также
Dev новости: Альтернатива Copilot, Python AI tool, RSC улучшения
Dev новости: Альтернатива Copilot, Python AI tool, RSC улучшения
Dev новости: Альтернатива Copilot, Python AI tool, RSC улучшения

Разработчики не идут в крипту, аналог Copilot, AI && Python, Новый Storybook 8 и подборка новостей

Вышел релиз Chrome 120
Вышел релиз Chrome 120
Вышел релиз Chrome 120

В этом материале рассказываем о нескольких крупных обновлениях. Релиз Chrome 121 запланирован на 23 января 2024 года.

Топ 7 диджитал трендов для бизнеса в 2024 году
Топ 7 диджитал трендов для бизнеса в 2024 году
Топ 7 диджитал трендов для бизнеса в 2024 году

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

Веб-фреймворк Astro добавил правила аудита доступности
Веб-фреймворк Astro добавил правила аудита доступности
Веб-фреймворк Astro добавил правила аудита доступности

Теперь разработчикам будет предоставлена возможность получать предупреждения о неподдерживаемых атрибутах ARIA (Accessible Rich Internet Applications) и отсутствующих атрибутах, необходимых для ролей ARIA.