Offscreen Canvas API - freeing up the Main Thread

[Awendel]

One big downside to this library is that it is blocking the main thread and can be quite slow when rendering a large amount of HTML.

What would be ideal is to expose an OffscreenCanvas API where for example if all styles are inline (not relying on a stylesheet), one just sends the entire outerHTML as a string blob to the web worker, that then uses an XML Parser etc. to convert it into Canvas rendering Calls.

This way a huge amount of HTML could be rendered to Canvas without blocking the MainThread at all.

[niklasvh]

The library still depends on DOM layout and style resolution/computed values, which need to be done on the main thread.

[Awendel]

Sure sure, but all of that data can be quite easily string encoded in a pre-step.

My suggested Pipeline:

MAIN-THREAD
• get HTML Elements (.outerHTML etc)
• get Computed Style & Text encode --> just convert to array or key value Map
• send to Web Worker

WEB-WORKER
• use XML parser to make sense of .outerHTML
• translate the Computed Style Array / Map into ContextCommands
• apply to OffscreenCanvas

This new structure might introduce some additional internal steps, but would in the end lead to much better performance

EDIT: Unless the majority of latency comes from getting the computedStyle etc instead of the Canvas Calls, haven't run a benchmark yet around that...