Opaque performance issue using `.setValue`

In two separate applications that both make use of .setValue, Codemirror calls different functions internally. It’s unclear to me why the performance is so radically different. I removed all calls to other functions and am now only calling .setValue.

The one thing that is different in both applications are the CSS styles. One uses flexbox, the other fixed heights.

Here is the call-chain of functions called in either version. Can upload profiles as well. @marijnh any ideas?

FAST:

• anonymous
  • anonymous
    • makeChange
      • makeChangeInner
        • makeChangeSingleDoc
          • makeChangeSingleDocInEditor
            • startWorker
              • Delayed.set
                • setTimeout
  • endOperation
    • endOperations
      • endOperation_W1
        • updateDisplayIfNeeded
          • patchDisplay
            • updateForLineChanges
              • updateLineText
                • getLineContent
                  • buildLineContent
                • replaceChild
      • endOperationR2
        • updateHeightsInViewport (selftime: 0.9 ms)

Total Duration: 2.6 ms

SLOW:

• anonymous
  • anonymous
    • makeChange
      • filterChange
        • Codemirror.signal
      • makeChangeInner
        • computeSelAfterChange
          • normalizeSelection
        • addChangeToHistory
          • historyChangeFromChange
            • attachLocalSpans
      • makeChangeSingleDoc
        • makeChangeSingleDocInEditor
          • estimateHeight (selftime: 202 ms)
  • endOperation
    • endOperations
      • endOperation_R2
        • updateHeightsInViewport (selftime: 215 ms)
      • endOperation_finish
        • postUpdateDisplay
          • displayWidth (selftime: 230 ms)

Total Duration: 650 ms

[den1k]

Use fixed width and height on the container of the editor element. On Thu, May 4, 2017 at 5:07 AM redlolgeerf [e-mail] wrote:

i’ve encountered the same problem with very slow updateHeightsInViewport. are there any workarounds?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/codemirror/CodeMirror/issues/4076#issuecomment-299132652, or mute the thread https://github.com/notifications/unsubscribe-auth/AEb7Ij5V17NbWz3XNFsi5pJRbhLdoj0Tks5r2ZU3gaJpZM4I48pD .

[marijnh]

It should be fairly easy to modify the code to use the viewport height/scroll offsets for computing which part is visible,

Unfortunately, no. To ensure that things are drawn before they are scrolled into view, CodeMirror uses a very involved scrolling model for its container.