このページは Cloud Translation API によって翻訳されました。

Chrome 124 の新機能

Pete LePage

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

宣言型 Shadow DOM を実行できる新しい API が 2 つあります。使用できます。
Web Sockets でストリームを使用できます。
ビュー遷移が改善。
他にも多くの機能を利用できます。

詳細を確認するには、詳しくは、 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);
}

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

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

ビュー遷移の改善

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

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

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

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

その他

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

disallowReturnToOpener ピクチャーインピクチャーにボタンを表示しないことをブラウザに通知しますユーザーはオープナーのタブに戻ることができます。
キーボードでフォーカス可能なスクロールコンテナシーケンシャルモードを使用してスクロールコンテナをフォーカス可能にすることで、アクセシビリティを向上させます。フォーカスナビゲーション。
ユニバーサルインストールにより、インストールしていないページも含め、どのページにもインストールできます現在の PWA の条件を満たしている。

Chrome 124 の新機能

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

WebSocket Stream API

ビュー遷移の改善

その他

関連情報

登録