Новое в Chrome 85

Пит ЛеПейдж

Chrome 85 уже начинает выпускаться в стабильную версию.

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

Я Пит ЛеПейдж , работаю и снимаю из дома, давайте углубимся и посмотрим, что нового для разработчиков в Chrome 85!

Видимость контента

Процесс рендеринга браузеров

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

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


.my-class {
  content-visibility: auto;
}

Чтобы получить максимальную отдачу от content-visibility , примените его к родительским разделам с более сложными алгоритмами макета, такими как flexbox и grid , или к тем, у которых есть дочерние разделы с собственными макетами.

Разбивая контент на части и добавляя content-visibility: auto; , время рендеринга этой страницы уменьшилось с 232 мс до всего лишь 30 мс.

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

@property и переменные CSS

Переменные CSS, которые технически называются пользовательскими свойствами, — это здорово. С помощью API свойств и значений CSS Houdini вы можете определить тип и резервное значение по умолчанию для ваших пользовательских свойств. Ранее я рассматривал их в разделе «Новое в Chrome 78» , когда мы добавили поддержку их определения в JavaScript.

Начиная с Chrome 85, вы также можете определять и устанавливать свойства CSS непосредственно в CSS. Что мне нравится в свойствах CSS, так это то, что они придают свойству семантическое значение, резервные значения и даже позволяют проводить тестирование CSS.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

У Уны есть отличный пост @property : предоставление суперспособностей переменным CSS , который показывает, как их можно использовать.

Получить установленные связанные приложения

API getInstalledRelatedApps() позволяет вам проверить, установлено ли ваше приложение, а затем настроить взаимодействие с пользователем.

Например, покажите пользователю другой контент на целевой странице, если ваше приложение уже установлено. Централизуйте дублирующиеся функции в одном приложении, чтобы избежать путаницы. Или, если ваше собственное приложение уже установлено, не рекламируйте установку PWA.

Когда он впервые появился в Chrome 80 , он работал только для приложений Android. Теперь на Android он также может проверить, установлено ли ваше PWA. А в Windows он может проверить, установлено ли ваше приложение Windows UWP.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Прочтите мою статью Установлено ли ваше приложение? getInstalledRelatedApps() сообщит вам об этом! на web.dev, чтобы узнать, как это работает и как подписывать свои приложения, чтобы доказать, что они принадлежат вам.

Ярлыки значков приложений

Ярлык значка приложения в Windows

В Chrome 84 мы добавили поддержку ярлыков значков приложений. Я случайно сказал, что они доступны везде, но доступны они только на Android. Теперь, в Chrome 85, они доступны на Android и Windows , а также в Chrome и Edge.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

Подробную информацию можно найти в статье «Ярлыки значков приложений» на сайте web.dev, и я прошу прощения за возникшую путаницу.

Пробная версия Origin: потоковая передача запросов с помощью fetch()

Начиная с Chrome 85, fetch передача с возможностью загрузки доступна в качестве пробной версии. Это позволяет начать выборку до того, как тело запроса будет готово. Раньше вы могли начать запрос только тогда, когда все тело было готово к работе. Но теперь вы можете начать отправлять контент, даже пока вы его создаете.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

Например, используйте его для прогрева сервера или для потоковой передачи аудио или видео, записанного с микрофона или камеры.

Джейк подробно изучил запросы потоковой передачи с помощью API-интерфейса выборки на веб-сайте web.dev, а также рассмотрел эту тему в последнем выпуске HTTP203 — запросы потоковой передачи с получением видео.

И более

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

Promise.any возвращает обещание, которое выполнено первым обещанием, которое должно быть выполнено или отклонено.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

Заменить все экземпляры в строке проще с помощью .replaceAll() , регулярных выражений больше нет!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

В Chrome 85 добавлена ​​поддержка декодирования AVIF — формата изображений, закодированного с помощью AV1 и стандартизированного Alliance for Open Media . AVIF обеспечивает значительный выигрыш в сжатии по сравнению с JPEG и WebP. Недавнее исследование Netflix показало экономию на 50 % по сравнению со стандартным JPEG и более 60 % на контенте с форматом 4:4:4.

И удаление AppCache началось .

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

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

Подписаться

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

Я Пит Лепейдж, и я наконец-то подстригся !

Как только выйдет Chrome 86, я буду здесь, чтобы рассказать вам, что нового в Chrome!