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 リリースノート
- Chrome DevTools の新機能(124)
- ChromeStatus.com のアップデート(Chrome 124)
- Chromium ソース リポジトリの変更リスト
- Chrome リリース カレンダー
登録
最新情報を入手するには、 Chrome Developers YouTube チャンネル 新しい動画が公開されるたびに メールでも通知されます
Chrome 125 のリリースと同時に Chrome の新機能を紹介します