4

I am using Rangy to help with some text highlighting functionality in a website. In short, the user can select some text, highlight the text (via button click), and the user can create multiple highlights this way.

The highlights are saved to a database, and at any point in the future the user can re-load the highlights.

However, I have a performance issue when using the restoreCharacterRanges which is part of the "TextRange" module. This performance issue becomes much more noticeable when there are more highlights to load.

Currently, I am using some code similar to below (just to point out, it works exactly how I want, it just isn't fast enough):

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);
}

With the code example above, the performance issue occurs during the selection.restoreCharacterRanges call. It takes about 0.6 seconds to run in my test.

Now, when loading multiple highlights, I expectedly get this 0.6 second hit for each one, and this can quickly add up.

Is there something I can do to load multiple highlights more efficiently? Maybe with one call to restoreCharacterRanges?

I have attempted to push multiple selections to the selectionRanges array, but this seems to have undesired effects when the highlightSelection call is made (i.e. it only highlights the first)

4

1 回答 1

2

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

于 2013-02-21T14:29:34.410 回答