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
Worklet
実験的
Chrome 完全対応 65Edge 未対応 なしFirefox 未対応 なし
補足 無効
未対応 なし
補足 無効
補足 Available only in Firefox Nightly.
無効 This feature is behind the dom.worklet.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 52Safari 未対応 なしWebView Android 完全対応 65Chrome Android 完全対応 65Firefox Android 未対応 なし
補足 無効
未対応 なし
補足 無効
補足 Available only in Firefox Nightly.
無効 This feature is behind the dom.worklet.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
addModule
実験的
Chrome 完全対応 65Edge 未対応 なしFirefox 未対応 なし
補足 無効
未対応 なし
補足 無効
補足 Available only in Firefox Nightly.
無効 This feature is behind the dom.worklet.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 52Safari 未対応 なしWebView Android 完全対応 65Chrome Android 完全対応 65Firefox Android 未対応 なし
補足 無効
未対応 なし
補足 無効
補足 Available only in Firefox Nightly.
無効 This feature is behind the dom.worklet.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

関連トピック
  1. Worklet
  2. メソッド
    1. addModule()