Title: Measuring performance
We would like to measure performance of our CM6-based editor, specifically we would like to measure the time between the user's keystroke and a character appearing on screen. We are tracing an "input lag" issue and would like to know how widespread this is.
I have put together a prototype (see this sandbox) which attempts to measure this using a keydown event and a MutationObserver on the view.contentDOM, attempting to use this as a somewhat crude proxy for screen updates.
Based on some flamegraphs I've taken, the measurement appears to roughly correspond with the timing of processing a keystroke:
Note that the CM6-KeyStrokeToRender yellow bar at the top roughly lines up with the end of the green processing bars.
However this approach has a few problems. Firstly, it appears if the MutationObserver is moved into a ViewPlugin (see this sandbox), then the timing in the flamegraph no longer lines up as above:
It's not entirely clear to me why this would be the case.
In addition, I have found that it is quite difficult to implement this in a more realistic editor. There are many DOM mutations that are not initiated by the user typing. I've made an another sandbox using the basicSetup and javascript, which breaks due to highlighting of matching brackets manipulating the DOM before any keystrokes have happened.
I believe this could be solved if there were a hook of some kind that was called after the DOM is updated by the view. If this hook was passed the update it could potentially be used to determine the source? Does this sound like a viable approach?
Or do you have any ideas on alternative approaches that could solve this problem?