reactjs - 非被动事件侦听器导致“阻塞”代码（使用React Ace）并因此导致性能问题(Non-passive event listeners resulting in “blocking” code (with React Ace) and hence causing performance issues)

Question

My project involves creating cards (like flashcards) that involve React Ace to write or edit code.

(我的项目涉及创建涉及React Ace的卡（如抽认卡）来编写或编辑代码。)

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)

(（有关工作项目的信息，请在此处-https://visit-sparkle.apricity.co.in 。对于喜欢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.

(现在，尽管这些卡可以正常加载，但我认为这是一个主要的性能暗示，这是由于React-ace的非被动事件处理所致，这导致了一段代码阻塞，这非常严重地减慢了我页面的呈现速度。)

Performance cost due to this:

(由于此而导致的性能成本：)

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.

(Google建议使用{passive：true}强制执行一个对象，以从根本上提高性能。)

How can we enable this with React-Ace?

(我们如何使用React-Ace启用它？)

Their documentation does not seem to help.

(他们的文档似乎没有帮助。)

Appreciate all help.

(感谢所有帮助。)

Thanks

(谢谢)

  ask by Pruthvi Kumar translate from so

Answer 1

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.

(控制台中的chrome消息显示有些误导，如果处理程序执行的滚动任务不是滚动所必需的，则使用被动鼠标滚轮事件可以防止滚动事件侦听器所附加的元素时出现性能问题。)

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.

(在使用ace编辑器的情况下，侦听器所附加的元素是不可滚动的，因此侦听器本身不会对性能产生任何影响。)

There may be some other issue causing performance issue on your site, but i didn't notice any performance issues after creating 10 cards.

(可能还有其他问题导致您的网站上出现性能问题，但是创建10张卡后我没有发现任何性能问题。)

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}) }