Rangy: Can I improve the performance when restoring multiple character ranges for highlighting?

Question

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)

Answer 1

You could just use the serialize() and deserialize() (demo) methods of the Highlighter for this. I recently added a more performant way of serializing ranges to the Highlighter that also removes the dependency on the TextRange module, which I have to admit is desperately slow for a lot of tasks.