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
の話。