ProseMirror / prosemirror

The ProseMirror WYSIWYM editor
http://prosemirror.net/
MIT License
7.61k stars 336 forks source link

Lazy and virtual the NodeViewDesc render to improve performence #1478

Closed fantasticit closed 1 month ago

fantasticit commented 1 month ago

In order to improve performence, modify the code at prosemirror-view to lazy and virtual render dom.

  view.domObserver.stop();
  if (!isVisible) {
      while (this.dom.firstChild) {
          this.dom.firstChild.remove()
      }
      this.dom?.classList?.add('virtual')
      let currentHeight = this.node.childCount * 32;
      this.dom?.style?.setProperty('--maybe-height', currentHeight + 'px');
  } else {
      renderDescs(this.contentDOM, this.children, view);
  }
  view.domObserver.start();

Before call renderDescs(this.contentDOM!, this.children, view), calculate or predict whether this view desc are visible. If not visible, remove all children; otherwise, call renderDescs(this.contentDOM!, this.children, view). Also add scroll listener to prosemirror dom container, cycle this operation.

I would like to know if this is effective, if it can improve performance, or do you have any suggestions?

fantasticit commented 1 month ago

image image

marijnh commented 1 month ago

Virtual viewporting is explicitly out of scope for this library. Having implemented it in CodeMirror, I know what is involved in setting this up, and I'm not going to add that complexity to ProseMirror.