「Google Chrome 124」安定版リリース、JavaScriptを使用してシャドウDOMを挿入可能に

ウェブブラウザ「Google Chrome」の最新安定版であるバージョン124.0.6367.60がリリースされました。JavaScriptを使用してシャドウDOMを挿入したり、特定の要素の解析が終わるまでレンダリングをブロックしたりする機能が導入されました。

New in Chrome 124  |  Blog  |  Chrome for Developers
https://developer.chrome.com/blog/new-in-chrome-124/

Chrome 124  |  Release notes  |  Chrome for Developers
https://developer.chrome.com/release-notes/124

◆JavaScriptからシャドウDOMを使用可能に
これまでinnerHTMLを使用して要素内部のHTMLを指定する時、シャドウDOMを含むHTMLを記入しても正常にシャドウDOMが解析されず表示されないという問題がありました。

Chrome 124では新たに「setHTMLUnsafe()」というメソッドが追加され、この新たなメソッドを使用することでシャドウDOMを含むHTMLを適切に表示することが可能になりました。

「DOMParser.parseFromString()」にシャドウDOMの解析機能を加えた「parseHTMLUnsafe()」も同時に実装されています。

今回新たに追加された2つのメソッドは名前に「Unsafe」と付いている通り、入力のサニタイズが行われないため入力として渡す内容が安全であることを別途確認する必要があります。なお、入力をサニタイズするバージョンも将来的に登場予定と述べられています。

◆WebSocketStream APIが登場
従来のWebSocket APIではサーバーからメッセージを受信した際にWebSocket.onmessageが呼び出されて処理が行われます。この時、クライアントの処理能力を超える数のメッセージを受信した場合にはメッセージのバッファでメモリがいっぱいになるかCPU使用率が100％になって応答しなくなってしまいます。

Chrome 124で登場したWebSocketStream APIはWebSocket APIとStream APIを統合したもので、従来のWebSocket通信の機能を維持しながらStream APIの背圧を導入します。背圧はデータの受け入れ準備が整っていない場合にストリームのチェーンの前方に配信速度を遅くするための信号を送信する仕組みです。

◆pageswapイベントが登場
ナビゲーションによってドキュメントが新しいものに置き換えられる際にドキュメントのwindowオブジェクトでpageswapイベントが発生するようになりました。ナビゲーションのタイプに加え、同オリジン内であれば遷移後のURLも取得できるため適切な遷移の処理を行う事が可能です。

◆レンダリングブロック機能が追加される
「<link rel=expect href="#id">」というリンク要素を使用して要素のIDを指定すると、当該IDの要素が完全に解析されるまでレンダリングをブロックすることが可能になりました。重要なコンテンツの解析が終了するまでレンダリングを遅延させることで全てのブラウザで最初の描画を一貫させることができます。

◆その他のアップデート
・ピクチャーインピクチャーで「disallowReturnToOpener」をサポート
ピクチャーインピクチャーウィンドウにおいて元のタブに戻るボタンを非表示にすることが可能になりました。

・スクロールコンテナをフォーカスすることが可能に
従来は「tabindex」で0以上の数値が指定されているスクロールコンテナしかフォーカスできませんでしたが、Chrome 124からはtabindexが指定されていないスクロールコンテナもフォーカス可能になりました。なお、これまで通りtabindexに負の数を指定することで明示的にフォーカス不可能にすることが可能です。

・任意のページをPWAとしてインストール可能に
PWAとしてウェブページをインストールするにはさまざまな条件を満たす必要がありましたが、Chrome 124からは任意のページをPWAとしてインストール可能になりました。

また、Google Chrome 124には22件のセキュリティバグフィックスが含まれています。

なお、次期安定版の「Google Chrome 125」は現地時間の2024年5月14日にリリース予定です。