Chrome 124 の新機能

Chrome 124 の特長は次のとおりです。

詳細を確認するには、詳しくは、 Chrome 124 リリースノート

JavaScript で宣言型 Shadow DOM を使用する

宣言型 Shadow DOM を使用できる新しい API が 2 つあります。 JavaScript

setHTMLUnsafe()innerHTML と類似しており、 要素を追加します。これは 宣言型 Shadow DOM を含む HTML を以下に示します。

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

innerHTML だけを使用すると、ブラウザは適切に解析できず、 Shadow DOM がありません。しかし setHTMLUnsafe() を使用すると、Shadow DOM が作成され、 要素が想定どおりに解析されることを確認します

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

もう 1 つの API は parseHTMLUnsafe() で、次のように機能します。 DOMParser.parseFromString()

これらの API はどちらも安全でないため、入力を行いません。 サニタイゼーションを行いますですから、何を食べても安全であることを確認する必要があります。 今後のリリースでは、サニタイゼーションを提供するバージョンがリリースされる予定です。 表します。

最後に、これらの API は、 Firefox と Safari

WebSocket Stream API

WebSocket は、VPC ネットワーク間の ブラウザとサーバーの間で相互に通信できます。この方法は たとえばチャットアプリなどで すぐに情報を扱いたい場合に 入ってきます

しかし、データの到着が処理速度を上回った場合はどうでしょうか。

これはバック プレッシャーと呼ばれ、深刻な頭痛の種です。 残念ながら WebSocket API には、 できます。

WebSocket Stream API は、 ウェブ ソケットを利用できます。つまり、バック プレッシャーは 追加料金なしでご利用いただけます

まず、新しい WebSocketStream を作成し、それに 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);
}

次に、接続が開かれるのを待ちます。 ReadableStreamWritableStream です。この関数を呼び出すことで、 ReadableStream.getReader() メソッドの場合、ReadableStreamDefaultReader が返されます。 ストリームが終了するまでデータを read() できます。

データを書き込むには、WritableStream.getWriter() メソッドを呼び出します。これにより、 WritableStreamDefaultWriter に変換してからデータを write() できます。

ビュー遷移の改善

ビュー遷移機能にも注目しています。また、2 つの新機能も追加されました。 が導入されます。

pageswap イベントは、ナビゲーション時にドキュメントのウィンドウ オブジェクトで呼び出されます。 新しいドキュメントに置き換わります。

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

ドキュメントのレンダリング ブロック機能では、ドキュメントのレンダリングをブロックできます。 ファースト ペイントが一貫して行われるようにし、重要なコンテンツが解析されるまで すべてのブラウザで利用できます。

その他

もちろん、他にもたくさんあります。

  • disallowReturnToOpener ピクチャー イン ピクチャーにボタンを表示しないことをブラウザに通知します ユーザーはオープナーのタブに戻ることができます。

  • キーボードでフォーカス可能なスクロール コンテナ シーケンシャル モードを使用してスクロール コンテナをフォーカス可能にすることで、アクセシビリティを向上させます。 フォーカス ナビゲーション。

  • ユニバーサル インストールにより、インストールしていないページも含め、どのページにもインストールできます 現在の PWA の条件を満たしている。

関連情報

ここでは、重要なハイライトのみを取り上げます。以下のリンクを確認してください。 その他の変更が行われます。

登録

最新情報を入手するには、 Chrome Developers YouTube チャンネル 新しい動画が公開されるたびに メールでも通知されます

Chrome 125 のリリースと同時に Chrome の新機能を紹介します