Worklet

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

Worklet インターフェイスは軽量なウェブワーカーを提供し、開発者がレンダリングパイプラインの低水準な部分を制御できるようにします。

ワークレットでは、グラフィックや音声処理といった、高い性能を必要とする処理を JavaScript や WebAssembly コードを使って記述できます。

ワークレットの種類

ワークレットの利用はいくつかの用途に限定されています。つまり、ウェブワーカーのように好きな計算をさせる用途には使えません。 Worklet インターフェイスは、すべての種類のワークレットに共通する属性とメソッドを抽象化する一方、直接インスタンスを作成することはできません。実際にインスタンスを作成するには、以下のクラスを利用します。

クラス名 説明 動作するスレッド 仕様書
PaintWorklet CSS プロパティがファイルを必要とする場合に、プログラムによって画像を生成するためのものです。このインターフェイスには CSS.paintWorklet でアクセスします。 Chrome: メインスレッド
Gecko: 描画スレッド 		CSS 描画 API
AudioWorklet カスタムオーディオノードでの音声処理のために使用します。 ウェブオーディオレンダリングスレッド ウェブオーディオ API
AnimationWorklet スクロールに伴うアニメーションや、性能を必要とするアニメーションをプログラミングするために使用します。 編集スレッド CSS アニメーションワークレット API
LayoutWorklet カスタム要素のサイズと位置を定義するために使用します。 CSS レイアウト API

WebGL を用いた 3D グラフィックにはワークレットを使用しません。その代わりに GLSL で記述した頂点シェーダーとフラグメントシェーダーを書いてください。これらのシェーダーコードはグラフィックカードの上で動作します。

プロパティ

Worklet インターフェイスでは、プロパティは定義されていません。

メソッド

Worklet.addModule()

指定された URL にあるスクリプト モジュールを現在のワークレットに追加します。

仕様書

Specification
HTML Standard
# worklets-worklet

ブラウザーの互換性

BCD tables only load in the browser

関連情報