Новое в 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.

Подписаться

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

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