4

これは私の最初の質問であり、私は英語のネイティブ スピーカーではないため、説明がわかりにくい場合は、事前にお詫び申し上げます。

環境

語彙セットを操作する小さなアプリケーションの開発を担当しています。アプリケーションは、GWT-Bootstrap およびアプリケーションの UI 部分とは関係のない他のいくつかのライブラリによって追加された GWT 上に構築されています。この語彙の用語をユーザーに公開するために、視覚的に言えばツリー構造を使用します。

話

ツリーにはいくつかの要件があります。アイテムのドラッグ アンド ドロップ機能を許可し、アイテム間のコネクタを表示する必要があります。

ネイティブ GWT コンポーネントの Tree ui クラスを使用することから始めました。ツリーに多くの用語がロードされていると、本番モードでもパフォーマンスが低下することが判明しました。

CellTree の実装を試すことにしましたが、「showmore」ボタンを非表示にするのは簡単な作業ではなく、ツリーのスタイリングも行うため、私には合いませんでした。

最後に、ゼロからツリーを独自に実装することになります。この実装は基本的に単純な html リスト構造 (ul-li) に依存しており、最大の css 機能を利用できます。実際、ツリー ノードの展開は、「チェックボックス ハック」として知られるトリックを使用して css で行われます。

この時点で、ツリーのカスタム実装は高速で (ツリーや celltree よりも優れています)、数千のアイテムが取り込まれていて、要件を満たしていましたが...

問題

アイテムが他のアイテムの上にドラッグされている場合、それらのアイテムのスタイルは、ドロップの可能性に応じて変化します。

最初の解決策

最初のアイデアは、css を活用し、:hover セレクターを使用して、クラスに応じて項目のスタイルを変更することでした。しかし、現在のブラウザー (特に Chrome) には重大な問題があり、マウスの左ボタンが押されている場合 (何かをドラッグした場合)、css :hover がトリガーされません (クロムの問題 122746)。

:hover トリガーの問題が解決されるまで、排他的な css ソリューションを忘れる必要があるようです。

2番目のソリューション

私がたどり着いた他の唯一の解決策は、アイテムのスタイルをプログラムで変更することです。

ハンドラーのコード

@Override
public void onDragEnter(DragEnterEvent event)
{
    if (event.getSource() instanceof Word)
    {
        event.stopPropagation();
        event.preventDefault();
        Word word = (Word) event.getSource();
        word.addStyleDependentName("over");
    }
}
@Override
public void onDragLeave(DragLeaveEvent event)
{
    if (event.getSource() instanceof Word)
    {
        event.stopPropagation();
        event.preventDefault();
        Word word = (Word) event.getSource();
        word.removeStyleDependentName("over");
    }
}

少数のアイテムでは問題なく動作しますが、数千のアイテムを扱うとアプリケーションがフリーズし、レンダリングがランダムになります。

精度

この問題は、ツリー内の 5000 項目を処理するときに発生します (アプリケーションはそのようなデータセットを処理する必要があります)。

イベントバブリングなどの効率的なイベント処理の問題を認識しており、潜在的なハンドラーの数が各アイテムに固有のものである場合、アイテムの数が増えるにつれてパフォーマンスが低下する要因になる場合に推奨されるため、ハンドラーは一意です。 .

二次的に、スピードトレーサーを使用して問題の原因を分析しましたが、理解できないことがわかりました:

イベントはツリーの最上位要素で非常に遅く、特にスタイルの再計算後に発生するのに 1 秒かかるペイント イベント 遅いイベント スピード トレーサー スクリーンショット

イベントの速度は、ツリーの最下部の要素で 十分です 十分な速度のイベント スピード トレーサーのスクリーンショット

質問

私は数日からこの問題に悩まされています.誰かが私が欠けているものを指摘できるのだろうか. おそらく、動作は完全に正常ですが、そのような問題の回避策があるのではないでしょうか? この点で誰かが私を助けてくれたらうれしいです。

返信ありがとうございます。

リルブレイン

4

1 に答える 1

2

GWT-Dndを使用している場合は、それを参照してください。

画面上にドラッグ可能な要素が多い場合、ドラッグのパフォーマンスが低下する

このパフォーマンスの問題は、ドロップ イベントでウィジェットの x、y 座標を見つけることに関連していると言われています。

com.allen_sauer.gwt.dnd.client.DropControllerCollection.getIntersectDropController(int x, int y)

DropController の候補をループするコードのブロックがあり、デバッグのみを目的としているように見えます。

for (int i = sortedCandidates.length - 1; i >= 0; i--) {
   Candidate candidate = sortedCandidates[i];
   if (DOMUtil.DEBUG) {
      DOMUtil.debugWidgetWithColor(candidate.getDropTarget(), "blue");
   }
}

その後、コードはループし、x 座標と y 座標が DropController 上にあるかどうかを実際に識別しようとします。

これがあなたを助けることを願っています。

于 2013-12-20T22:58:20.200 に答える