Worklet
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
The Worklet インタフェースは軽量な Web Workers を提供し、開発者がレンダリングパイプラインの低水準な部分をコントロールできるようになります。Worklet ではグラフィックや音声処理といった、性能を必要とする処理を JavaScript や WebAssembly を使って記述できます。
Worklet の種類
Worklets の利用はいくつかの用途に限定されています; つまり Web Worker のように好きな計算をさせるといった用途には使えません。Worklet インタフェースは、すべての種類の worklet に共通する属性とメソッドを抽象化する一方、直接インスタンスを作成することはできません。実際にインスタンスを作成するには、以下のクラスを利用します:
| クラス名 | 説明 | 動作するスレッド | 仕様 |
|---|---|---|---|
PaintWorklet (en-US) |
CSSのカスタムプロパティの描画方法を定義するために使用します。CSS.paintWorklet から利用できます。 |
Chrome: Main thread Gecko: Paint thread |
CSS Painting API |
AudioWorklet (en-US) |
カスタムオーディオノードでの音声処理のために使用します |
Web Audio render thread | Web Audio API |
AnimationWorklet |
スクロールに伴うアニメーションや、性能を必要とするアニメーションをプログラミングするために使用します | Compositor thread | CSS Animation Worklet API |
LayoutWorklet |
カスタムエレメントのサイズと位置を定義するために使用します | CSS Layout API |
WebGL を用いた 3D グラフィックスには Worklet を使用できません。その代わりにGLSLで記述した頂点シェーダとフラグメントシェーダを 使用します。これらのシェーダコードはグラフィックスカードの上で動作します。
属性
Worklet インタフェースでは、属性は定義されていません。
メソッド
Worklet.addModule()- Worklet にスクリプトモジュールをURLで追加します。
仕様
| 仕様 | 状況 | コメント |
|---|---|---|
| Worklets Level 1 Worklet の定義 |
草案 |
ブラウザ互換性
BCD tables only load in the browser
関連情報
- Houdini: Demystifying CSS on Google Developers (May 2016)
- AudioWorklet :: What, Why, and How on YouTube (November 2017)
- Enter AudioWorklet on Google Developers (December 2017)
- Animation Worklet - HTTP203 Advent on YouTube (December 2017)