The Worklet インタフェースは軽量な Web Workers を提供し、開発者がレンダリングパイプラインの低水準な部分をコントロールできるようになります。Worklet ではグラフィックや音声処理といった、性能を必要とする処理を JavaScript や WebAssembly を使って記述できます。
Worklet の種類
Worklets の利用はいくつかの用途に限定されています; つまり Web Worker のように好きな計算をさせるといった用途には使えません。Worklet インタフェースは、すべての種類の worklet に共通する属性とメソッドを抽象化する一方、直接インスタンスを作成することはできません。実際にインスタンスを作成するには、以下のクラスを利用します:
| クラス名 | 説明 | 動作するスレッド | 仕様 |
|---|---|---|---|
PaintWorklet |
CSSのカスタムプロパティの描画方法を定義するために使用します。CSS.paintWorklet から利用できます。 |
Chrome: Main thread Gecko: Paint thread |
CSS Painting API |
AudioWorklet |
カスタムオーディオノードでの音声処理のために使用します |
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連情報
- 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)