Новые возможности Chrome 85

Pete LePage

Стабильная версия 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-переменные – суперспособности, в которой рассказывается, как их использовать.

Как получить список связанных установленных приложений

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

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

Когда эта функция впервые появилась в Chrome 80, она работала только с приложениями Android. Теперь на устройствах Android можно также проверить, установлено ли ваше PWA. Кроме того, на устройстве с 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. Приношу извинения за путаницу.

Эксперимент с источником: запросы потоковой передачи с fetch()

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

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

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

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

Подробную информацию можно найти в статье Джейка Арчибальда Потоковая передача запросов с помощью API Fetch на сайте web.dev и в видео HTTP203 – потоковая передача запросов с помощью API Fetch.

и многое другое.

Конечно, это далеко не все возможности.

Promise.any возвращает объект Promise, который распознается или отклоняется в зависимости от того, какой из переданных объектов Promise будет распознан или отклонен первым.

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 и стандартизированных Альянсом за открытые медиа. AVIF обеспечивает значительное преимущество в сжатии по сравнению с JPEG и WebP. Согласно недавнему исследованию Netflix, экономия при использовании AVIF составляет 50% по сравнению со стандартным JPEG и более 60% для контента 4:4:4.

Кроме того, мы начали удалять AppCache.

Дополнительные материалы

Это лишь некоторые из основных изменений. Дополнительную информацию об изменениях в Chrome 85 можно найти по ссылкам ниже.

Подписаться

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

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

Как только выйдет Chrome 86, я сразу же расскажу вам о его новых функциях.