編集

Chrome 124

#Chrome

2024 年 4 月 16 日に Chrome 124 がリリースされました。

Chrome 124 | Release notes | Chrome for Developers

Chrome 124 | Release notes | Chrome for Developers

#JavaScript から Shadow DOM を使用する API の追加

今まで、Element.innerHTMLなどに Shadow DOM を含む HTML を記述しても正しく解析されず表示されない問題がありました。

次の API を利用することで Shadow DOM の解析も可能になります。

  • Element.setHTMLUnsafe()
    • Element.innerHTMLと同様に、要素の内部 HTML を指定された文字列に設定する。
  • Document.parseHTMLUnsafe()
    • DOMParser.parseFromString()と同様に、文字列を解析して Document を返す。

ただし、これらは Unsafe と付いている通り危険であり、script やイベントハンドラの content 属性など危険な要素や属性の削除を行うサニタイズを行わないため、利用には注意が必要です。

今後、入力のサニタイズを行うバージョンの提供予定とのことです。また、これらの API は Safari などでも利用可能です。

#WebSocket Stream API

WebSocket API と Stream API を統合した WebSocket Stream API が追加されました。ブラウザの WebSocket API では、受信メッセージの Back-pressure がサポートされていないため、処理能力を超える量のメッセージを受信した場合、メッセージのバッファでメモリが占拠されたり、CPU 使用率が 100%になってしまう問題があります。

Back-pressure とは、WebSocket の文脈で簡単に言えば、処理が間に合わなければ受信を遅延させることであり、これをユーザーランドで適切に行うことは出来ませんでした。

https://www.reactivemanifesto.org/ja/glossary#Back-Pressure

WebSocket Stream API では、追加コストなく Back-pressure を適用できます。

WebSocket Stream API は次のように記述します。

jsx
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);
}

#Pageswap event

View Transition など、ナビゲーションによって古いドキュメントが新しいドキュメントに置き換えられる直前に発火するイベントです。一方、Chrome 123 で追加された Pagereveal は View Transition の文脈では紹介されていませんでしたが、これは新しいドキュメントで最初のレンダリングが行われる直前に発火します。

それぞれ、次のように古い/新しい URL を取得できます。

jsx
window.addEventListener("pageswap", async (event) => {
  if (event.viewTransition) {
    const current = new URL(navigation.currentEntry.url);
    const destination = new URL(event.activation.entry.url);
  }
});

window.addEventListener("pagereveal", async (event) => {
  if (event.viewTransition) {
    const from = new URL(navigation.activation.from.url);
    const current = new URL(navigation.activation.entry.url);
  }
});

URL や viewTransition であることを確認することで、ナビゲーション時に適切な事前準備が出来るようになります。

#その他

  • PictureInPicture の元のタブに戻るボタンを非表示にするオプション disallowReturnToOpener の追加
  • tabindex の指定されていないスクロールコンテナにもフォーカスが可能に。今まで、tabindex が指定されておらず、内部にフォーカス可能な要素がなければ、キーボードユーザーは一度キーボードから手を放す必要があった。フォーカスさせたくない場合は、明示的に tabindex に負の数を指定する必要がある。
  • ユニバーサルインストールによって、PWA の条件を満たさなくても、任意のページをインストールできるようになった。
  • writingsuggestions属性。ブラウザによる入力要素への書き込みの提案をコントロールできる。いくつかのブラウザで提供がはじまっている AI による入力支援機能を無効化した場合は、これを false にしておく必要がある。autoComplete 属性など、このようなブラウザの機能は開発者が入力要素に HTML 外でバリデーションをかけている場合、疑似的な select 要素などで問題になる。
    • 継承されるため、個別に付ける必要はない。
  • ドキュメントのレンダリングブロック。<link rel="expect" href="#id"> のように指定すると、指定された ID の要素が完全に解析されるまで、レンダリングをブロックできる。これにより、重要なコンテンツの解析が終了するまでレンダリングが遅延でいるため、最初の描画に一貫性を持たせられる。
  • WebGPU が ServiceWorker および SharedWorker をサポート。これにより例えば、タブ間でリソースを共有できるようになる。
編集