Re: Registering multiple worklet modules or not?

Hi there,

I hope I can help bring some clarity to the options. There's a few details
which mitigate the differences in performance of the two options:
- the additional fetches in B are all triggered simultaneously so they
should not result in additional round trips.
- Layout and Paint Worklet files are loaded into each[1] of two or more
WorkletGlobalScopes[2][3]. Since they are required to be idempotent[4], the
browser can use the instances from all of its WorkletGlobalScopes in
parallel. This means that loading a single file defining 3 classes will
allow an equivalent amount of parallelism as loading them independently.

The only limit to how many you can load should be the available memory.
As for which one performs better, they should have identical execution
speeds so if your web server doesn't support HTTP/2 there should be
slightly less data downloaded by bundling them[5].

Hope this helps! Cheers,
-Rob

[1] "For each WorkletGlobalScope in the worklet’s WorkletGlobalScopes, ...
Run a module script given script"
https://www.w3.org/TR/worklets-1/#dom-worklet-import
[2] "The user agent must have, and select from at least two
LayoutWorkletGlobalScopes"
https://www.w3.org/TR/css-layout-api-1/#generating-fragments
[3] "Select from at least two PaintWorkletGlobalScopes"
https://www.w3.org/TR/css-paint-api-1/#global-scope-selection
[4] https://www.w3.org/TR/worklets-1/#code-idempotency
[5]
https://developers.google.com/web/fundamentals/performance/http2#header_compression

On Mon, Oct 14, 2019 at 7:02 AM Bob Hamblok <post@bhamblok.be> wrote:

> Dear list,
>
> When I make heavily use of CSS Houdini, in one app...
> What would be best practice?
>
> *A. **loading one (bundled) file, defining multiple
> registerPaint/registerLayout-classes?*
>
> CSS.paintWorklet.addModule('path/to/my/bundled/file/defining/all/my/registerPaint/classes.js');
>
> CSS.layoutWorklet.addModule('path/to/my/bundled/file/defining/all/my/registerLayout/classes.js');
>
> *or*
>
> *B. **loading multiple worklets, each dedicated to one
> registerPaint/registerLayout-class?*
> CSS.paintWorklet.addModule('path/to/my/registerPaint/class/to/render/a');
> CSS.paintWorklet.addModule('path/to/my/registerPaint/class/to/render/b');
> CSS.paintWorklet.addModule('path/to/my/registerPaint/class/to/render/c');
> CSS.layoutWorklet.addModule('path/to/my/registerLayout/class/to/render/x');
> CSS.layoutWorklet.addModule('path/to/my/registerLayout/class/to/render/y');
> CSS.layoutWorklet.addModule('path/to/my/registerLayout/class/to/render/z');
>
> I think (A.) would be most performant booting the app, regarding having
> to fetch and load just one (or two) (bundled) file(s). But I wonder if (B.)
> would be more performant rendering the DOM because the browser can
> instantiate multiple worklet-instances for multiple class-definitions each.
>
> How many worklets can be added/loaded/mounted?
>
Can anyone help me telling which option is best?
>
> Thank you very much,
>
> All the best,
>
> *Bob Hamblok | BOAPP GCV*
> Freelance Software Engineer | Architect | Consultant
> founder at neoScores NV
>
> *EMAIL* post@bhamblok.be
> *PHONE* +32 476 74 78 42 <+32%20476%2074%2078%2042>
>
> *ADDRESS* Jennevalstraat 18, BE-2600 Antwerp, Belgium
> *VAT* BE0682.695.007
>