Slow performance on PageDown/PageUp

1

CodeMirror is very slow when using the keys PageDown/PageUp with a large editor. You notice this when having a long document loaded and keep PageDown pressed.

We found a solution in updating the endOperation function like:

export function endOperation(cm) {
  let op = cm.curOp
  requestAnimationFrame(() =>
    finishOperation(op, group => {
      for (let i = 0; i < group.ops.length; i++)
        group.ops[i].cm.curOp = null
      endOperations(group)
    })
  })
}

Is it safe to delay the finishOperation call?

2

No. Much current code is written with the assumption that operations finish synchronously.

How big a document are you testing with, and in which browser? In a 30 000 line document in Firefox I’m not seeing a noticeable lag when using pageup/down.

3

Document was around 20.000 lines, but the document size doesn’t seem to be the problem. With a small editor size it is fast, it gets slow when using the editor fullscreen.

4

How many visible lines do you have when the editor is fullscreen?

5

there are 70 lines visible

6

I can notice a slight lag in Chrome with that editor height. Firefox still seems snappy. So yeah, that’s unfortunate, but the work it’s doing is more or less necessary (repaint the lines that get scrolled into view when the user takes an action), and I don’t think it is realistic to change the operation model in the short term, so I’m afraid this is just something you’ll have to live with.

7

The lag is indeed with Chrome, we use it as code editor in a Node Webkit application which uses chromium for the rendering. I noticed the same delay in the Brackets editor.

Overall performance is good. With mouse scrollweel scrolling is fast, only noticed the slow performance with the PageDown/PageUp keys, probably because it also needs to update cursor position then.

8

Figured out it was the complex layout of the whole app that is causing the dom updates of codemirror being slow, when simplifying the layout it becomes a lot faster. Codemirror standalone on a page is super fast.

Thanks for the fast response, seems that this wasn’t really an issue in CodeMirror.

9

You could try adding a CSS rule like .CodeMirror { contain: strict; } and see if it helps.

1 Like