Major performance degradation with multiple code blocks

[owenallenaz]

Performance starts to decay massively when working on documents which have code blocks in side them. This makes it really hard to work because you can't see the characters you are typing because the left panel is lagged by the right panel's processing. Here's an exaggerated example that replicates it: gist. If you copy that into dillinger and attempt to type you'll see what I mean. In my real world example I had a documentation file which only had 20 or so code blocks (but some were 20-50 lines long), and it ground to a halt pretty good.

From looking at the source I see that you are using highlight.js. I ran some tests with that to try and see what the primary culprit was. The primary culprit is the number of the highlighting blocks combined with the word count within the code blocks. As the code blocks get larger or more numerous, things get uglier.

There are two key culprits:

1. I believe the primary cause of the slowdown is due to due to the hljs.hightlightAuto usage in the preview directive. When testing if I use hljs.highlight() performance increases a ton (jsfiddle). Becaues markdown often contains the language preference, and marked returns a language in it's highlight function, using that may solve the problem alone.
2. Debounce the right pane. If there is a debounce on the right pane of 200ms then it will allow someone to type fairly quickly, but won't stop the page to render on every key up, only until there is a lull of 200ms between keyups. ngModelOptions supports a debounce but I don't know if it's easy to add to this application.

I may be able to create a pull request in a week or two, given time.

[JuanCaicedo]

I tried it on localhost though and definitely had problems, but strangely everything seemed fine when I tried it on http://dillinger.io/. I'd say the PR is a good idea though.