reactjs - 非被动事件侦听器导致“阻塞”代码（使用 React Ace）并因此导致性能问题

Question

我的项目涉及创建涉及 React Ace 来编写或编辑代码的卡片（如抽认卡）。一个用户的主页可以有多个抽认卡。（在这里查看工作项目 - https://visit-sparkle.apricity.co.in。对于喜欢 TL;DR 的人有一个“演示”部分）

现在，虽然这些卡可以正常加载，但我认为这是由于 React-ace 的非被动事件处理导致了一段代码的阻塞，从而非常非常糟糕地减慢了我的页面渲染速度。

性能成本由此产生：

重现代码：

    <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 建议使用 {passive: true} 强制执行一个对象，以从根本上提高性能。我们如何使用 React-Ace 实现这一点？他们的文档似乎没有帮助。

感谢所有帮助。谢谢

Answer 1

控制台中显示的消息镶边有点误导，如果处理程序正在执行对于滚动不是必需的慢速任务，则使用被动鼠标滚轮事件可以防止滚动事件侦听器所附加的元素时出现性能问题。在 ace 编辑器的情况下，监听器附加到的元素是不可滚动的，因此监听器本身不会对性能产生任何影响。可能还有其他问题导致您的网站出现性能问题，但在创建 10 张卡片后我没有发现任何性能问题。

您可以通过在创建编辑器之前添加来测试它

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