Repo Editor tab switching performance problems

notes.js has 1529 in my local and in preview mode of the new Repo Editor switching to notes.js tab takes around 1.46 seconds 😱

This is the performance output.

slack-imgs

This is the call stack.

slack-imgs-1

It looks like all those time spends in Vue internals. ~350msec spend on highlighting, but rest is Vue itself.

I think it's because of the v-html and I did something like this real quick. (sorry I don't have the diff, I already reverted it)

Code screenshot

This actually helped to reduce the time around 830msecs in total with highlighting. However I am not sure this is the best solution because I simply append a non VDOM element into Vue's DOM tree. I suppose, Vue can remove the custom element I appended when it decides to re-render the component.

This is the Vue version. Please observe the time after clicking the notes.js tab.

slack-imgs

This is the custom version with the code I pasted above. Again this may be a bad idea at all, we need to investigate. But it's significantly faster than the original Vue way.

slack-imgs-1

/cc @jschatz1