Enable sanitization in a Worker thread
What does this MR do and why?
Current sanitization process takes a lot of time on the main thread, which results in stuttering and postponing important UI tasks. This MR intends to change that and move sanitization off the main thread.
In order to do that dompurify library which is used under the hood should be replaced with something that works in a worker thread.
I've chosen js-xss library as the primary replacement candidate due to its popuplarity, active maintainment status and API flexibility. API was very important becase a replacement library should be backwards compatible with what dompurify has to offer.
To achieve backwards comparibility and zero breaking changes I've made a simple transform function that takes a dompurify config and converts it to a proper js-xss config.
The first candidate to get off-thread sanitization was Emoji picker. By my measurements it took almost 100ms on a high-end machine, which is a lot. With a 4x CPU slowdown I got about 300ms. After moving Emoji sanitization off-thread it took only 8ms with a 4x CPU slowdown, most of which was data manipulation.
This can also be applied to other instances of sanitize usage, but I thought it'd be a good idea to start with a small change first.
Screenshots or screen recordings
Here's a comparison of the time it took for loadEmojiWithNames to complete with a 4x CPU slowdown on a high-end machine.
Note that after the change loadEmojiWithNames is split into two tasks since we now have two async operations there.
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
- Open this seeded merge request on your GDK install.
- Mesaure performance with DevTools performance tab.
- Change the branch to master and measure again.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.