Question

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

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

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

目前，我正在使用类似于下面的代码（只是指出，它完全符合我的要求，它只是不够快）：

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模块的依赖，我不得不承认这对于很多任务来说非常慢。

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

1 个答案: