Новое в 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 мы добавили поддержку App Icon Shortcuts. Я случайно сказал, что они доступны везде, но они были доступны только на 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 доступно в качестве пробной версии origin. Оно позволяет вам начать fetch до того, как будет готово тело запроса. Раньше вы могли начать запрос только после того, как все тело было готово к отправке. Но теперь вы можете начать отправлять контент, даже пока вы все еще его генерируете.

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

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

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

Джейк подробно рассмотрел потоковые запросы с API fetch на web.dev, а также рассмотрел этот вопрос в последней статье HTTP203 — потоковые запросы с API fetch .

И многое другое

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

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.

Подписаться

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

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

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