Using `html-to-image` was a mistake…
I used it to generate the canvas objects so that the app could take a snapshot of the canvas, but the performance was horrible.
After making a change in the canvas (e.g. moving an object), a denounce timer will run and afterwards, the canvas objects will be generated. Lastly, a snapshot will then be taken. This all happened using `html-to-image`.
This caused a lag spike where the whole application froze for a few seconds.
Login to reply
Replies (1)
This was the flow:
1. Clone the entire React DOM tree.
2. Calculate all CSS rule for every node.
3. Embed all external fonts and images.
4. Serialize it all into a massive SVG.
5. Draw the SVG to an invisible canvas to extract a `.png`.
This all ran synchronously on main thread which then caused the lag spike.