Worklet
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.
TheWorklet interface is a lightweight version ofWeb Workers and gives developers access to low-level parts of the rendering pipeline.
With Worklets, you can run JavaScript andWebAssembly code to do graphics rendering or audio processing where high performance is required.
Worklets allow static import ofECMAScript modules, if supported, usingimport.Dynamic import is disallowed by the specification — callingimport() will throw.
In this article
Worklet types
Worklets are restricted to specific use cases; they cannot be used for arbitrary computations like Web Workers. TheWorklet interface abstracts properties and methods common to all kind of worklets, and cannot be created directly. Instead, you can use one of the following classes:
| Name | Description | Location | Specification |
|---|---|---|---|
AudioWorklet | For audio processing with custom AudioNodes. | Web Audio render thread | Web Audio API |
AnimationWorklet | For creating scroll-linked and other high performance procedural animations. | Compositor thread | CSS Animation Worklet API |
LayoutWorklet | For defining the positioning and dimensions of custom elements. | CSS Layout API | |
SharedStorageWorklet | For running private operations on cross-site data, without risk of data leakage. | Main thread | Shared Storage API |
Note:Paint worklets, defined by theCSS Painting API, don't subclassWorklet. They are accessed through a regularWorklet object obtained usingCSS.paintWorklet.
For 3D rendering withWebGL, you don't use worklets. Instead, you write vertex shaders and fragment shaders using GLSL code, and those shaders will then run on the graphics card.
Instance properties
The Worklet interface does not define any properties.
Instance methods
Worklet.addModule()Adds the script module at the given URL to the current worklet.
Specifications
| Specification |
|---|
| HTML> # worklets-worklet> |
Browser compatibility
See also
- Houdini: Demystifying CSS on Google Developers (2016)
- AudioWorklet :: What, Why, and How on YouTube (2017)
- Enter AudioWorklet on Google Developers (2017)
- Animation Worklet - HTTP203 Advent on YouTube (2017)