Новое в Chrome 97

Пит ЛеПейдж

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

С Новым годом! Я Пит ЛеПейдж . Давайте окунемся и посмотрим, что нового для разработчиков в Chrome 97.

Веб-транспорт

Если вы используете Web Sockets или API WebRTC Data Channel для отправки сообщений между вашим сервером и страницей, для вас есть новая возможность. WebTransport — это новый API, предлагающий двунаправленный обмен сообщениями клиент-сервер с низкой задержкой.

Он имеет меньшую задержку, чем WebSockets, и в отличие от API RTC Data Channel, который предназначен для однорангового обмена сообщениями, API Web Transport специально разработан для обмена сообщениями клиент-сервер.

Он поддерживает отправку данных, надежно с помощью API потоков и ненадежно с помощью API датаграмм. Он поддерживается в веб-воркерах. И поскольку он предоставляет интерфейс, совместимый со Streams, он поддерживает оптимизации вокруг обратного давления.

Для его использования вам понадобится сервер, поддерживающий HTTP/3, что, как правило, проще, чем настройка и обслуживание сервера WebRTC. Откройте новый экземпляр WebTransport , дождитесь его подключения, и вы можете начать отправлять данные.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

Подробную информацию можно найти в статье «Эксперименты с WebTransport» на сайте web.dev.

Обнаружение особенностей типа скрипта

Сегодня мы можем использовать атрибут nomodule для определения поддержки модулей JavaScript в браузере. Но в разработке находится несколько новых предложений функций, таких как карты импорта, правила спекуляции и предварительная загрузка пакетов. Нам нужен способ узнать, что поддерживает браузер.

Введите HTMLScriptElement.supports() . Вы можете использовать его, чтобы определить, какие типы скриптов вы можете использовать, и отправить браузеру лучший вариант.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

Новые прототипы массивов

Мне нравится, когда JavaScript становится проще. Array и TypedArray теперь поддерживают статические методы findLast() и findLastIndex() .

Эти функции фактически аналогичны find() и findIndex() , но выполняют поиск с конца массива, а не с начала.

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

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

Эмулировать Chrome 100 в строке UA

Всего через несколько месяцев мы достигнем Chrome 100, трехзначного номера версии. Любой код, который проверяет номера версий или анализирует строку UA, следует проверить, чтобы убедиться, что он обрабатывает три цифры.

Существует флаг #force-major-version-to-100 , который изменит текущий номер версии на 100, чтобы вы могли убедиться, что все работает так, как и ожидалось.

Chrome отмечает страницу, выделяя новую опцию #force-major-version-to-100

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

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

Новые строки в записях форм теперь нормализуются так же, как в Gecko и WebKit, что улучшает взаимодействие между браузерами.

Мы стандартизируем имена клиентских подсказок, добавляя к ним префикс sec-ch . Например, dpr становится sec-ch-dpr . Мы продолжим поддерживать существующие версии этих подсказок, но вам следует спланировать их возможное устаревание и удаление.

Закрытые элементы <details> теперь доступны для поиска и на них можно ссылаться. Эти скрытые элементы будут автоматически расширяться при использовании поиска на странице, ScrollToTextFragment и навигации по фрагментам элементов.

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

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

Подписаться

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

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

,

Пит ЛеПейдж

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

С Новым годом! Я Пит ЛеПейдж . Давайте окунемся и посмотрим, что нового для разработчиков в Chrome 97.

Веб-транспорт

Если вы используете Web Sockets или API WebRTC Data Channel для отправки сообщений между вашим сервером и страницей, для вас есть новая возможность. WebTransport — это новый API, предлагающий двунаправленный обмен сообщениями клиент-сервер с низкой задержкой.

Он имеет меньшую задержку, чем WebSockets, и в отличие от API RTC Data Channel, который предназначен для однорангового обмена сообщениями, API Web Transport специально разработан для обмена сообщениями клиент-сервер.

Он поддерживает отправку данных, надежно с помощью API потоков и ненадежно с помощью API датаграмм. Он поддерживается в веб-воркерах. И поскольку он предоставляет интерфейс, совместимый со Streams, он поддерживает оптимизации вокруг обратного давления.

Для его использования вам понадобится сервер, поддерживающий HTTP/3, что, как правило, проще, чем настройка и обслуживание сервера WebRTC. Откройте новый экземпляр WebTransport , дождитесь его подключения, и вы можете начать отправлять данные.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

Подробную информацию можно найти в статье «Эксперименты с WebTransport» на сайте web.dev.

Обнаружение особенностей типа скрипта

Сегодня мы можем использовать атрибут nomodule для определения поддержки модулей JavaScript в браузере. Но в разработке находится несколько новых предложений функций, таких как карты импорта, правила спекуляции и предварительная загрузка пакетов. Нам нужен способ узнать, что поддерживает браузер.

Введите HTMLScriptElement.supports() . Вы можете использовать его, чтобы определить, какие типы скриптов вы можете использовать, и отправить браузеру лучший вариант.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

Новые прототипы массивов

Мне нравится, когда JavaScript становится проще. Array и TypedArray теперь поддерживают статические методы findLast() и findLastIndex() .

Эти функции фактически аналогичны find() и findIndex() , но выполняют поиск с конца массива, а не с начала.

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

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

Эмулировать Chrome 100 в строке UA

Всего через несколько месяцев мы достигнем Chrome 100, трехзначного номера версии. Любой код, который проверяет номера версий или анализирует строку UA, следует проверить, чтобы убедиться, что он обрабатывает три цифры.

Существует флаг #force-major-version-to-100 , который изменит текущий номер версии на 100, чтобы вы могли убедиться, что все работает так, как и ожидалось.

Chrome отмечает страницу, выделяя новую опцию #force-major-version-to-100

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

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

Новые строки в записях форм теперь нормализуются так же, как в Gecko и WebKit, что улучшает взаимодействие между браузерами.

Мы стандартизируем имена клиентских подсказок, добавляя к ним префикс sec-ch . Например, dpr становится sec-ch-dpr . Мы продолжим поддерживать существующие версии этих подсказок, но вам следует спланировать их возможное устаревание и удаление.

Закрытые элементы <details> теперь доступны для поиска и на них можно ссылаться. Эти скрытые элементы будут автоматически расширяться при использовании поиска на странице, ScrollToTextFragment и навигации по фрагментам элементов.

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

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

Подписаться

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

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