4

私はRangyを使用して、Webサイトのテキスト強調表示機能を支援しています。つまり、ユーザーはテキストを選択し、（ボタンをクリックして）テキストを強調表示し、この方法で複数の強調表示を作成できます。

ハイライトはデータベースに保存され、将来いつでもユーザーはハイライトを再ロードできます。

ただし、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秒のヒットを期待しており、これはすぐに合計される可能性があります。

複数のハイライトをより効率的にロードするためにできることはありますか？たぶん1回の呼び出しでrestoreCharacterRanges？

複数の選択を配列にプッシュしようとしましたselectionRangesが、呼び出しが行われたときにこれは望ましくない影響を与えるhighlightSelectionようです（つまり、最初の選択のみが強調表示されます）

4

1 に答える 1

2

これには、蛍光ペンのserialize()and deserialize()（デモ）メソッドを使用できます。私は最近、蛍光ペンに範囲をシリアル化するよりパフォーマンスの高い方法を追加しました。これにより、TextRangeモジュールへの依存関係も削除されます。これは、多くのタスクで非常に遅いことを認めなければなりません。

于 2013-02-21T14:29:34.410 に答える