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

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

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

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

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

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

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

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

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

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

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

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

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

Подписаться

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

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