javascript - Rangy:恢复多个字符范围以突出显示时，我可以提高性能吗？

Question

我正在使用 Rangy帮助网站中的一些文本突出显示功能。简而言之，用户可以选择一些文本，突出显示文本(通过按钮单击)，并且用户可以通过这种方式创建多个突出显示。

亮点被保存到数据库中，并且在 future 的任何时候用户都可以重新加载亮点。

但是，我在使用 restoreCharacterRanges 时遇到了性能问题。这是“TextRange”模块的一部分。当要加载更多亮点时，此性能问题会变得更加明显。

目前，我正在使用一些类似于下面的代码(只是指出，它完全按照我的意愿工作，只是不够快):

function LoadHighlight(start, end){
    var selectionRanges = [];
    selectionRanges.push({
        "characterRange": {
            "start": start,
            "end": end
        }
    });

    var selection = rangy.getSelection();

    selection.restoreCharacterRanges(myElement, selectionRanges);

    highlighter.highlightSelection(highlightClass, selection);
}

对于上面的代码示例，性能问题发生在 selection.restoreCharacterRanges 期间。称呼。在我的测试中运行大约需要 0.6 秒。

现在，当加载多个高光时，我预计每一个都会得到 0.6 秒的命中，这可以很快加起来。

我可以做些什么来更有效地加载多个亮点？也许只需调用 restoreCharacterRanges ?

我试图将多个选择推送到 selectionRanges数组，但是当 highlightSelection调用(即只突出显示第一个)

Answer 1

您可以使用 serialize()和 deserialize() ( demo )荧光笔的方法。我最近向 Highlighter 添加了一种更高效的序列化范围的方法，它还消除了对 TextRange 模块的依赖，我不得不承认这对于很多任务来说非常缓慢。