可内容编辑和按块选择的Backspace性能问题

问题描述

我正在使用Angular 9.1.7和一个contenteditable div在我的应用程序中创建基本的文本编辑功能。我在此div上绑定了许多事件处理程序，但是我偶然发现的事情使我感到困惑，这是当我在div中选择一段文本并键入退格键时发生的事情。

TL; DR 更新我创建了一个最小的可复制示例here on stackblitz。只需尝试删除Lorem Ipsum文本的其中一个段落，即可了解我的意思。

整个浏览器进程似乎暂停了一段时间（> 10秒）。我无法单击其他任何东西，也无法滚动，等等。UI完全超出了我的控制范围，直到突然之间没有，并且呈现了退格键的效果（删除了我选择的文本块）。我在一些事件处理程序中放入了一堆控制台日志，并得出了以下事件序列：

keydown
keydown
beforeinput start
beforeinput end
input start
input end
// ... out to lunch for a few seconds ...
keyup start
keyup end

...我还定时了所有这些事件的开始->结束，它们的执行时间可以忽略不计。因此，在我的代码中找不到任何占用处理器并阻塞浏览器UI的地方。我运行了Chrome Dev Tools分析器，并看到了类似的内容：

...，如果我滚动到开始出现紫色内容的位置，我会看到以下内容：

就Angular如何与contenteditable div进行交互而言，这是我组件的ViewChild，其在标记中如下所示：

      <div #editableText contenteditable="true"
        (keydown)="onKeyDown($event)"
        (keyup)="onKeyUp($event)"
        (keypress)="onKeyPress($event)"
        (input)="onInput($event)"
        (beforeinput)="onBeforeInput($event)"><br></div>

...，然后我截取按键事件，以确定并构造适合我需要的元素的innerHTML。这在组件中表现为：

@ViewChild('editableText',{ static: false }) editableElem: ElementRef;
...
updateEditableText(html) {
  this.editableElem.nativeElement.innerHTML = html;
}

我已经检查过，据我所知，updateEditableText函数不会被重复调用或以任何方式牵涉性能问题。

我不确定如何获得更多的见解，而不是这与Angular更改检测有关，还是更直接归因于contenteditable。在contenteditibale中，作为要删除的选择的基础的标记等于具有与其关联的数据属性的几个span元素，但是我不明白为什么contenteditable标记的复杂性对我来说很重要，只需选择一个块内容并按退格键。

我正在寻求有关如何深入了解此处发生的问题的建议（例如Chrome开发工具分析器的不同用法，Angular诊断技术等），并查明此性能瓶颈的根源，因此我可以解决它或解决问题。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular contenteditable performance