When the full amount of data is dispatched, the linenumber will flash

v6
1

description：
I have a data playback function. The scene is to play back the steps entered by the user。
But my dispatch is not processed incrementally, but uses the full amount of data in each frame。
question:
This will cause a problem that the linenumber will flash。The reason is that I added EditorView.lineWrapping

a

Each frame number will be replaced from the position of 0 。

  useEffect(() => {
    const currentValue = view ? view.state.doc.toString() : '';
    if (view && value !== currentValue) {
      view.dispatch({
        changes: { from: 0, to: currentValue.length, insert: value || '' },
      });
    }
  }, [value, view]);

extsion:[EditorView.lineWrapping,view.lineNumbers()]

Can the full replacement make the linenumber not flash?

2

I cannot reproduce this in a plain CodeMirror setup (see here).

3

Later, I will create a demo to reproduce it。

4

It really cannot be reproduced. I looked at the performance of chrome and found that the line number jitter caused by Caton

It seems that several methods are time-consuming to execute(For example, the updateAttrs method in @codemirror/view)。Is this reasonable?

image
image1744×959 122 KB

PS:The json data of chrome’s performance is too large to upload

5

updateAttrs does almost nothing. As the profile shows, the browser is running a layout there, and that’s what takes the time. Which is odd, because that function doesn’t query layout, it just sets and removes DOM attributes. If I profile something like this on Chrome I don’t see layouts happening remotely as often as in the profile in your screenshot.