Новое в Chrome 103

Пит ЛеПейдж

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

  • Появился новый код статуса HTTP 103 , который помогает браузеру решить, какой контент следует предварительно загрузить еще до того, как страница начнет загружаться.
  • API локального доступа к шрифтам предоставляет веб-приложениям возможность перечислять и использовать шрифты, установленные на компьютере пользователя.
  • AbortSignal.timeout() — более простой способ реализации тайм-аутов в асинхронных API.
  • И это еще не все.

Меня зовут Пит ЛеПейдж . Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 103.

HTTP 103 код статуса 103 - ранние подсказки

Один из способов улучшить производительность страницы — использовать подсказки ресурсов. Они дают браузеру «подсказки» о том, что ему может понадобиться позже. Например, предварительная загрузка файлов или подключение к другому серверу.

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

Однако браузер не может отреагировать на эти подсказки, пока сервер не отправит хотя бы часть страницы.

Представьте, что браузер запрашивает страницу, но серверу требуется несколько сотен миллисекунд, чтобы сгенерировать ее. Пока браузер не начнет получать страницу, он просто сидит и ждет. Но если сервер знает, что странице всегда будет нужен определенный набор подресурсов, например, файл CSS, немного JavaScript и несколько изображений, он может немедленно ответить новым кодом статуса HTTP 103 Early Hints и попросить браузер предварительно загрузить эти подресурсы.

Затем, как только сервер сгенерирует страницу, он может отправить ее с обычным ответом HTTP 200. Когда страница поступает, браузер уже начал загружать требуемые ресурсы.

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

Начните работу с HTTP 103. Первые подсказки:

API доступа к локальным шрифтам

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

Новый API доступа к локальным шрифтам дает веб-приложениям возможность перечислять локальные шрифты на устройстве пользователя и обеспечивает доступ к данным таблицы шрифтов.

Чтобы получить список шрифтов, установленных на устройстве, вам сначала необходимо запросить разрешение.

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

Затем вызовите window.queryLocalFonts() . Он возвращает массив всех шрифтов, установленных на устройстве пользователя.

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Если вас интересует только подмножество шрифтов, вы можете отфильтровать их, добавив параметр postscriptNames .

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

Подробную информацию можно найти в статье Тома «Использование расширенной типографики с локальными шрифтами» на сайте web.dev.

Более простые тайм-ауты с AbortSignal.timeout()

В JavaScript AbortController и AbortSignal используются для отмены асинхронного вызова.

Например, при выполнении запроса fetch() вы можете создать AbortSignal и передать его в fetch() . Если вы хотите отменить fetch() до того, как он вернется, вызовите abort() для экземпляра AbortSignal . До сих пор, если вы хотели, чтобы он прервался через определенное время, вам нужно было обернуть его в setTimeout() .

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

К счастью, это стало проще с новым статическим методом timeout() в AbortSignal . Он возвращает объект AbortSignal , который автоматически прерывается по истечении указанного количества миллисекунд. То, что раньше было несколькими строками кода, теперь стало всего одной.

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() поддерживается в Chrome 103 и уже есть в Firefox и Safari.

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

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

  • Формат файла изображения avif теперь доступен для общего доступа через Web Share
  • Chromium теперь соответствует Firefox, запуская popstate сразу после изменения URL. Теперь порядок событий: popstate , затем hashchange на обеих платформах.
  • А Element.isVisible() сообщает, виден элемент или нет.

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

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

Подписаться

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

Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 104, я сразу же расскажу вам, что нового в Chrome!