Worklet

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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 の定義		 草案  

ブラウザ互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
WorkletChrome 完全対応 65Edge 完全対応 79Firefox 完全対応 76IE 未対応 なしOpera 完全対応 52Safari 未対応 なしWebView Android 完全対応 65Chrome Android 完全対応 65Firefox Android 完全対応 79Opera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 9.0
addModuleChrome 完全対応 65Edge 完全対応 79Firefox 完全対応 76IE 未対応 なしOpera 完全対応 52Safari 未対応 なしWebView Android 完全対応 65Chrome Android 完全対応 65Firefox Android 完全対応 79Opera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 9.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報