0

My project involves creating cards (like flashcards) that involve React Ace to write or edit code. A user's home page can have more than one flashcard. (For working project check here - https://visit-sparkle.apricity.co.in. There is a "demo" section for those who prefer TL;DR)

Now, while these cards load alright, there is a major performance implication which I believe is due to non-passive event handling by React-ace which is resulting in a blocking piece of code that slows down my page's rendering very very badly.

enter image description here

Performance cost due to this: enter image description here

Code to reproduce:

    <AceEditor
        mode="python"
        theme="dracula"
        name={`CodeEditor-1`}
        onChange={this.handleCodeChanges}
        fontSize={14}
        showPrintMargin={true}
        showGutter={true}
        highlightActiveLine={true}
        value={this.props.code}
        readOnly={!this.props.editState}
        height='150px'
        width='100%'
        editorProps={{ $blockScrolling: false}} //I've tried this but does not seem to help
    />

Google is suggesting to enforce an object with {passive: true} to radically improve performance. How can we enable this with React-Ace? Their documentation does not seem to help.

Appreciate all help. Thanks

Pruthvi Kumar
  • 868
  • 1
  • 7
  • 15

1 Answers1

0

The message chrome displays in console is somewhat misleading, using passive mousewheel event can prevent performance issue with scrolling the element to which the event listener was attached, if the handler was performing slow task not essential for scrolling. In case of ace editor the element to which is attached the listener is not-scrollable, so the listener itself does not have any performance impact. There may be some other issue causing performance issue on your site, but i didn't notice any performance issues after creating 10 cards.

You can test this by adding before creating editors

var proto = Element.prototype
proto.addEventListener1 = proto.addEventListener1 || proto.addEventListener
proto.addEventListener = function(type, handler) { this.addEventListener(type, handler, {passive: true}) }

a user
  • 23,300
  • 6
  • 58
  • 90
  • Thanks for your response. Appreciate you trying to create cards to replicate this issue. As and when number of cards increase within a section, the load time linearly takes a toll. Im presuming "some" blocking code within ace editor is causing as the number of chrome warning also linearly increase with increased number of cards. I've profiled API response and regardless of number of cards, backend is resolving all my requests within ~300ms. So, something in frontend is the culprit. Im presumed it to be ace-editor. May be its something else! I'll keep digging. Thanks again – Pruthvi Kumar Nov 30 '19 at 23:46
  • I want to try "passive" eventlistening with ace-editor. Just to be 100% confident that is not what is causing the issue. Could you please throw some pointers around how this could be achieved with react-ace? Thanks heaps! – Pruthvi Kumar Nov 30 '19 at 23:49