Новое в Chrome 124

Пит ЛеПейдж

Вот основные моменты Chrome 124:

Хотите полный пробег? Ознакомьтесь с примечаниями к выпуску Chrome 124 .

Используйте декларативный теневой DOM в JavaScript

Есть два новых API, которые позволяют использовать декларативную теневую DOM из JavaScript.

setHTMLUnsafe() похож на innerHTML и позволяет вам установить внутренний HTML-код элемента в предоставленную строку. Это помогает, когда у вас есть HTML-код, включающий декларативный теневой DOM, например этот.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

Если вы просто используете innerHTML , браузер не будет правильно его анализировать, и теневого DOM не будет. Но с помощью setHTMLUnsafe() создается ваш теневой DOM, и элемент анализируется, как и следовало ожидать.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

Другой API — parseHTMLUnsafe() , он работает аналогично DOMParser.parseFromString() .

Оба этих API небезопасны , что означает, что они не выполняют никакой очистки ввода. Поэтому вам нужно убедиться, что все, чем вы их кормите, безопасно. Мы ожидаем, что в следующем выпуске появится версия, обеспечивающая очистку ввода.

Наконец, оба этих API уже поддерживаются в последних версиях Firefox и Safari!

API потока WebSocket

WebSockets — отличный способ пересылать данные между браузером пользователя и сервером без необходимости полагаться на опрос. Это отлично подходит для таких вещей, как чат-приложения, в которых вы хотите обрабатывать информацию, как только она поступает.

Но что, если данные поступают быстрее, чем вы можете обработать?

Это называется противодавлением и может вызвать у вас серьезные головные боли. К сожалению, API WebSocket не имеет хорошего способа справиться с обратным давлением.

API WebSocket Stream предоставляет вам возможности потоков и веб-сокетов, что означает, что обратное давление может быть применено без каких-либо дополнительных затрат.

Начните с создания нового WebSocketStream и передачи ему URL-адреса сервера WebSocket.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

Затем вы ждете открытия соединения, в результате чего создаются ReadableStream и WritableStream . Вызвав метод ReadableStream.getReader() , вы получаете ReadableStreamDefaultReader , из которого затем можно read() до тех пор, пока поток не будет завершен.

Чтобы записать данные, вызовите метод WritableStream.getWriter() , который предоставит вам WritableStreamDefaultWriter , в который вы затем сможете write() данные.

Посмотреть улучшения переходов

Я в восторге от функций View Transitions, и в Chrome 124 есть две новые функции, призванные упростить переходы между видами.

Событие pageswap вызывается для объекта окна документа, когда навигация заменяет документ новым документом.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

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

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

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

  • disallowReturnToOpener намекает браузеру, что он не должен отображать кнопку в окне «картинка в картинке», позволяющую пользователю вернуться на вкладку открытия.

  • Контейнеры прокрутки, фокусируемые с помощью клавиатуры, улучшают доступность, делая контейнеры прокрутки фокусируемыми с помощью навигации с последовательным фокусом.

  • А универсальная установка позволяет пользователям устанавливать любые страницы, даже те, которые не соответствуют текущим критериям PWA .

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

Здесь рассматриваются лишь некоторые ключевые моменты. Перейдите по следующим ссылкам, чтобы узнать о дополнительных изменениях в Chrome 124.

Подписаться

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

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