Вот что вам нужно знать:
- Адаптируйте свою цветовую схему с помощью новой функции
light-dark(). - Диагностика отзывчивости вашего сайта с помощью API Long Animation Frames .
- Избегайте снижения производительности при запуске Service Worker с помощью API статической маршрутизации Service Worker .
- И есть еще много чего .
Я Адриана Хара. Давайте углубимся и посмотрим, что нового для разработчиков в 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.
- Что нового в Chrome DevTools (123)
- Устаревание и удаление Chrome 123
- Обновления ChromeStatus.com для Chrome 123
- Список изменений репозитория исходного кода Chromium
- Календарь выпусков Chrome
Подписаться
Чтобы быть в курсе новостей, подпишитесь на канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.
Привет, Адриана Хара, как только выйдет Chrome 124, я буду здесь, чтобы рассказать вам, что нового в Chrome!
,
Вот что вам нужно знать:
- Адаптируйте свою цветовую схему с помощью новой функции
light-dark(). - Диагностика отзывчивости вашего сайта с помощью API Long Animation Frames .
- Избегайте снижения производительности при запуске Service Worker с помощью API статической маршрутизации Service Worker .
- И есть еще много чего .
Я Адриана Хара. Давайте углубимся и посмотрим, что нового для разработчиков в 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.
- Что нового в Chrome DevTools (123)
- Устаревание и удаление Chrome 123
- Обновления ChromeStatus.com для Chrome 123
- Список изменений репозитория исходного кода Chromium
- Календарь выпусков Chrome
Подписаться
Чтобы быть в курсе новостей, подпишитесь на канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.
Привет, Адриана Хара, как только выйдет Chrome 124, я буду здесь, чтобы рассказать вам, что нового в Chrome!