【问题标题】:removeAllRanges slow in chrome / Alternatives?removeAllRanges 在 chrome / Alternatives 中运行缓慢?
【发布时间】:2025-12-12 11:45:02
【问题描述】:

我正在使用 node-webkit (Chromium 38.0.2125.104) 开发一个 markdown 编辑器,它在键入时将 markdown 转换为 html,并以相同的 contenteditable 呈现它(一种突出显示)。所以一切正常:我通过在 dom 中插入一个新节点来保存插入符号的位置。然后我处理我的文本。然后我取回插入符号的位置并删除我的标记节点。

我的问题是我尽可能快地完成这一切。但是单次操作占用了一半以上的处理时间:

selection.removeAllRanges();

在完成所有操作之后,就在将我创建的范围添加到选择对象之前。 一次操作会损失大约 15/20 毫秒,这是在快速打字时开始感觉到的。有什么办法可以加快速度,比如调用其他东西,或者以不同的方式处理选择/范围? 谢谢(我是认真的,我一直用这个网站来回答问题,但这是我的第一个问题)

【问题讨论】:

    标签: javascript google-chrome range selection


    【解决方案1】:

    如果您只对 Chrome 感兴趣,您可以尝试使用非标准 WebKit 方法 setBaseAndExtent()(抱歉,没有文档链接,因为据我所知从未记录过)直接设置选择。我不知道它是否会更快;我不明白为什么会这样。

    假设您的范围存储在名为 range 的变量中,而您的选择存储在 sel 中:

    sel.setBaseAndExtent(range.startContainer, range.startOffset,
                         range.endContainer, range.endOffset);
    

    【讨论】:

    • 非常感谢!当页面中的 dom 元素越来越多时 removeAllRanges 越来越慢(有时超过 114 毫秒),您的解决方案在每种情况下都需要 8 毫秒!
    • 我补充说,我将​​此解决方案与一些节流结合使用,以获得更流畅的用户体验
    • 实际上,我发现问题在于使整个文档可编辑。我改为在makeEditableAndHighlight 中使commonAncestorNode 可编辑,这明显更快。
    • @lakenen:这是个好主意。我想我首先建议在所有浏览器都拥有contenteditable 之前让整个文档可编辑。在您的解决方案中,您需要确保 commonAncestorContainer 是一个元素而不是文本节点,然后才能使其可编辑。
    • 这里是关于 addRange() 的错误报告 bugs.chromium.org/p/chromium/issues/detail?id=138439。似乎 setBaseAndExtent() 对我来说工作缓慢