Large line widgets slow down the editor due to forced reflows

Here’s a sandbox showing the issue: https://codepen.io/anon/pen/zQGJMM

If I create a line widget with a large number of DOM nodes, then the CodeMirror instance quickly becomes laggy due to forced reflows. This seems to be because of how CodeMirror measures the line height in functions like updateHeightsInViewport, where it calculates display.lineDiv.offsetTop (the line widget is inside the lineDiv).

In the sandbox I cranked it up to 100k nodes inside the LineWidget to make the problem really noticeable (each edit takes almost 1 second on my computer) but the problem is still noticeable for smaller numbers of DOM nodes.

Is there anything I can do about this? My main use-case is to have a max-height on the LineWidget, so intuitively the height should always be fixed at the maximum when there are large numbers of nodes, so it seems like this should be possible to make fast. Any help would be greatly appreciated.

[SteveSonoa]

I recognize that this issue is marked as closed by the author, but I am also experiencing the same issues with the same symptoms (severe slowdown due to the offsetTop calculation). I’m using CodeMirror to display an API result, and 2 identified use cases return around 90,000 lines. With that calculation only taking a millisecond or two per line, at 90,000 lines, it slows the page to an apparent halt.

I will certainly begin testing with the CSS contain you mentioned earlier, but will this component be updated to address the issue natively? Thanks for your time.

[thomasjm]

Got it, thanks – I guess it’s time for virtual DOM tricks. Closing this now…