VirenMohindra
commented
2 years ago Using performant: true while instantiating the Typewriter class worked well.
This is incredible. The issue makes sense and also works for me on our Next.js site.
Was facing similar problems where our entire page was frozen because of the large amount of nodes being created.
I recommend this to be pushed upstream!
If you want to write a large bulk of text, the library will create several hundreds of text nodes because that's how it is structured.
On Firefox, it can handle the writing but will start to lag when the amount of nodes (in this case text nodes) gets too high. On Chromium, it lags when it writes all the characters (text nodes) but stops to lag when it finishes.
Fortunately, both of these issues can be solved by just putting characters in the last text node if it exists otherwise create a new text node and populate it. I have made a prototype which I am using for my site but the only problem is if you want to remove characters it will of course remove a text node which contains multiple characters.
https://github.com/SKFrozenCloud/typewriterjs/commit/f91da27dfeb55d6ee1fcb908ff7e2774d46ae56b