Google I/O 2021 フロントエンドまとめ（3/6）: 〜Webプラットフォーム最新情報（3/3）: その他〜

この記事は、Google I/O 2021で発表されたフロントエンド関連情報の中で個人的に気になったものをまとめたもので、
全6記事中3本目。

Webプラットフォームの話

ウェブプラットフォームの最新情報 @Google I/O 2021

Google Mapの新機能`WebGLOverlayView`で3Dマップの操作が出来るようになったよ。というお話

WebGLOverlayViewの継承クラスを作成して、その決められたイベントハンドラメソッド（onAdd(), onContextRestored(), onDraw）内でそれぞれ適切なセットアップ・描画処理を記述するとのこと。
デモではthree.jsを使ってグラフィックを設定／操作していた。

すげぇ楽しそう！！

`WebGPU`の紹介

WebGLとは別の、より低レベルなグラフィックAPIであるWebGPUの紹介。
低レベルAPIなのでハイパフォーマンスで、Vulcan, Metal, Direct3D 12などから発想を得ていて、3Dグラフィック界隈での今っぽい流れを汲んだものらしい。
いまのところ試験運用版とのこと。

V8が`SIMD`をサポートしたからChromeの`WebAssembly`がもっと高速になったよ。というお話

まず、SIMD（読み: しむど、しむでぃー; Single Instruction, Multiple Dataの略）というのは、一回の命令で複数のデータを並列一括処理出来る仕組みで、いわゆるベクトル演算。ベクトル演算なのでグラフィック処理や暗号処理、物理演算、機械学習などの演算が得意と言われている。
今回ChromeやNode.jsのJavaSript実行エンジンであるV8でSIMDがサポートされたので、いくつかの処理でより高速化できる可能性が広がったよというお話。
その一例としてGoogle Meetで、ブラウザ内にメディア処理パイプラインに導入してパフォーマンスを200%向上したり、TensorFlowをつかった背景ぼかし機能を実現したりしたよ。という話もあった。

V8のデバッグ体験向上としてDevToolsでWebAssemblyのブレークポイントと変数検査が出来るようになったよ。というお話

「これで、クライアントとサーバの両方で安全かつ快適に動作するWebAssemblyが作れるね！」みたいなことを言ってました。

`content-visibility`CSSプロパティによるレンダリングコスト削減手法の話

content-visibilityはCSSのプロパティの一つで、このプロパティが指定されたコンテンツのレンダリングを省略させたり出来る。
content-visibility: auto;を指定すると、要素がビューポート内にいないときはレンダリングが省略されパフォーマンスコストが削減できる。
今回は「これが使えるようになりましたよ」というお知らせ。

`Core Web Vitals`のお話

Core Web Vitals自体の話や、
Core Web Vitalsを改善したことによるページパフォーマンス改善・コンバージョン向上の話、
Core Web Vitalsを計測可能なツールの広がり、
Google検索のページランクの考慮にCore Web Vitalsが含まれるようになる
みたいな最近よく聞くCore Web Vitalsの話。

つづく