Chrome 122 の新機能

Adriana Jara

必知事項は次のとおりです。

アドリアナ・ジャラですChrome 122 のデベロッパー向け新機能を見てみましょう。

Storage Buckets API

Storage Buckets API を使用すると、粒度が細かくなり、永続ストレージをより適切に管理できます。

従来は、ユーザーがデバイスの保存容量を使い切ると、IndexedDB や localStorage などの API を使用して保存されたデータは、ユーザーが介入することなく失われます。ストレージを永続化する 1 つの方法は、StorageManager インターフェースの persist() メソッドを使用することです。ただし、このようにストレージの永続性をリクエストする方法は、オール オア ナッシング

Storage Buckets API の中心的な考え方は、サイトに複数のストレージ バケットを作成する機能を提供することです。これにより、ブラウザは各バケットを他のバケットとは独立して削除できます。そのため、エビクションの優先順位付けを指定して、最も重要なデータが削除されないようにすることができます。各ストレージ バケットには、IndexedDB や CacheStorage などの確立されたストレージ API に関連付けられたデータを含めることができます。

詳細と、ストレージ バケットの使用を開始するためのコードサンプルについては、ストレージの価値は一様ではありません。ストレージ バケットのご紹介をご覧ください。

パフォーマンス パネルの DevTools の改善

Chrome 122 では、DevTools の [Performance] パネルが次のように改善されました。

まず、[掲載結果] パネルの上部にある [タイムライン] で、パンくずリストを設定したり、パンくずリスト間を移動したりできるようになりました。パンくずリストを設定するには、[タイムライン] で範囲を選択し、その範囲にカーソルを合わせ、対応する [N ms] zoom_in ボタンをクリックします。ネストされた複数のパンくずリストを連続して作成できます。ズームレベル間を移動するには、[タイムライン] の上部にあるチェーン内の対応するパンくずリストをクリックします。次の動画で、パンくずリストの動作を確認しましょう。

また、メイン トラックにイベント イニシエータが追加されました。パフォーマンス >メイン トラックにはデフォルトで、イニシエータをつなぐ矢印と、イニシエータが引き起こした次のイベントが表示されます。

  • スタイルまたはレイアウトの無効化 ->[スタイルを再計算] または [レイアウト]
  • アニメーション フレームをリクエスト ->アニメーション フレームの呼び出し
  • アイドル状態のコールバックをリクエスト ->アイドル状態のファイヤー コールバック
  • タイマーをインストール ->タイマーの呼び出し
  • WebSocket を作成 ->[送信] と [WebSocket handshake] または [WebSocket の破棄]

矢印を表示するには、トレースで該当するイベントを見つけてクリックします。

リクエストからの矢印とアイドル状態のコールバックの起動。

DevTools の更新内容について詳しくは、Devtools 122 の新機能をご覧ください。

Async Clipboard API の unsanitized オプション

Async Clipboard API を使用してコピーと貼り付けを行う場合、read() メソッドの unsanitized オプションを使用すると、アプリとウェブサイトでサニタイズされていない HTML を取得できます。サイトにこのプロパティが含まれていない場合は、クリップボードから HTML を読み取った際にサニタイズされます。

デフォルトでは、非同期 API を使用して text/html MIME タイプを読み取ると、サニタイザーが呼び出され、セキュリティ上の懸念から HTML マークアップからコンテンツが削除され、結果の HTML にスタイルがインライン化されます。 このため、ウェブ デベロッパーやモバイルアプリが読み取る際に HTML ペイロードが大きくなり、HTML コンテンツの忠実度が低下します。

次の例で出力の違いを確認できます。

入力:

<style>p { color: blue; }</style><p>Hello, World!</p>'

サニタイズ（デフォルト）:

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

unsanitized オプションを使用する場合:

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

Clipboard API の基本については、クリップボードへのアクセスのブロックを解除するをご覧ください。

その他

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

  • CSS では、サポートされていない機能を含むコンテナクエリは一致しない。たとえば、次のクエリは は、不明な特徴のため、決して一致しません。
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() は File オブジェクトには影響せず、テキスト型のオブジェクトのみを削除します。

  • WebGL の drawingBufferStorage を使用すると、レンダリングをデフォルトの描画バッファのピクセル形式に変換し、8 ビットを超える精度を持つコンテンツを描画する際に余分なコピーを回避できます。

関連情報

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

登録

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

Adriana Jara より、Chrome 123 がリリースされ次第、Chrome の最新情報をお届けします。