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

Posted 2023-02-19

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

【英文标题】：Non-passive event listeners resulting in "blocking" code (with React Ace) and hence causing performance issues

【发布时间】：2020-03-25 15:35:05

【问题描述】：

我的项目涉及创建涉及 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 实现这一点？他们的documentation 似乎没有帮助。

感谢所有帮助。谢谢

【参考方案1】：

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

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

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

【讨论】：

感谢您的回复。感谢您尝试创建卡片来复制此问题。当一个部分内的卡片数量增加时，加载时间会线性增加。我假设 ace 编辑器中的“一些”阻塞代码导致了 chrome 警告的数量也随着卡片数量的增加而线性增加。我已经分析了 API 响应，无论卡的数量是多少，后端都在约 300 毫秒内解决了我的所有请求。所以，前端的东西是罪魁祸首。我认为它是王牌编辑器。可能是它的别的东西！我会继续挖掘。再次感谢

我想尝试使用 ace-editor 进行“被动”事件监听。只是为了 100% 确信这不是导致问题的原因。您能否就如何使用 react-ace 实现这一点提出一些建议？谢谢大家！