Improve DialogueAnimator performance about codecombat HOT 1 CLOSED

The current implementation is rebuilding and replacing the DOM there with every additional character, which is probably why it's so slow. Here are a handful of solution ideas.

1. Have canvas animate the text instead. Downside would be losing HTML formatting, so many things like inserting images and text coloring and all that fun stuff would need to be somehow re-implemented or lost.
2. Create some sort of white 'covering' element which is gradually removed from each line, making it look like the text is showing up but is actually just being unhidden. Then the DOM won't change, just the style of some covering element. The problem with that is it would be tricky to line things up and always get it right.
3. Set the text area to use CSS ellipsis and then gradually expand the area. The problem there is how to break down the text into independent lines that can be expanded from left to right independently, and do you want ellipses in there. That would also add one word at a time instead of one character at a time.
4. Get the animator to keep up with the clock by adding more than one character if it's falling behind. It would still be performance intensive, but it would yield to other things one the going gets rough and catch up later like the canvas does as well.
5. Ditch it. Downside there is it's useful for getting players to see that there is text, all that movement. And it's kinda cool. But really it's not necessary, and once all the characters have moving portraits when talking, the moving text will be less important.

from codecombat.