1

テーブルには約3000行あります。コレクションの一部のデータを表示します。たとえば、ユーザーのコレクションです。行には姓、名、父の名前があります。

user1First  user1Last  user1Father 
user2First  user2Last  user2Father 
user3First  user3Last  user3Father

ユーザーの完全な詳細を表示するアクションが必要です。私には3つのオプションがあります -

  1. クリック イベントを個々の行にバインドします。

    1. jqueryを使用するか、
    2. onclick 属性

  2. ワンクリック イベントをテーブル全体にバインドし、イベント バブリングを使用する

  3. 行にリンク列を追加する

上記の 3 つのうち、パフォーマンスの観点から最もコストがかかるものと最も安価なものはどれですか。これを達成する他の方法はありますか?

パフォーマンス基準 -

  1. スピードが最も重要です。

    1. 行をテーブルに追加する際に UI がブロックされません。- jquery append を使用して、サーバーから到着したときに非同期で追加します
    2. ビューを削除するときにすべてのイベントをクリーンアップするため、バインドを解除する時間も重要です。

  2. メモリは二次的なものですが、モバイルでもアプリを実行しているため、無視することはできません。

追記：backbone.jsを使用しています。イベントバインディング用。すべての行はバックボーン ビュー自体です [リンクを使用すると削除できます] それは marionette.collection ビューです

4

2 に答える 2

1

イベント ハンドラーを DOM ツリーの上位にアタッチしたかどうかに関係なく、イベントがバブルすることを忘れないでください。

委任されたイベントの主なパフォーマンスの批判は、常に発生するとは限らないイベント バインディングに関するものです。たとえば、委任されたイベントをテーブルにアタッチし、一部の行がセレクターに適合し、他の行が適合しない場合、イベントがテーブルを通過するかどうかにかかわらず、CSS セレクターをチェックするたびにパフォーマンス ペナルティを支払うことになります。行は指定された基準に一致しました。

デリゲート ハンドラーをアタッチすると、パフォーマンス ヒットが発生するかどうか、および発生する程度はセレクターによって異なります。たとえば、セレクターが ' td' の場合、チェックは 1 ステップのプロセスですe.target.tagName === 'TD'。ただし、セレクターが ' tr' の場合、e.target の親を参照解除して、その要素が' tr' であり、イベントが発生することを確認します。

ほとんどの場合、イベント ソースの近くにバインドされ、イベントが発生したときに通常はセレクターと一致する委任されたイベントは、パフォーマンスに大きな影響を与えることはありません。通常、このような状況ではコードの単純さとメモリ使用量が優先されるため、委任を使用する必要があります。

于 2013-10-21T18:25:18.700 に答える
1

クリック イベントをテーブルにアタッチし、イベント バブリングを使用することが最善の選択肢であることは間違いありません。これは、速度とメモリの両方で効率的です。

リンクのクリック時に ajax リクエストを起動している場合、列にリンクを追加することは最初のオプションと同じになります。

于 2013-10-21T18:05:42.287 に答える