3

数値の大きな HTML テーブルを使用する私が書いたアプリケーションでは、設計上、ホバーされたセルの行と列が強調表示される必要があります。

私は jQuery 1.3.x を使用してこのプロジェクトのすべての JS を開発しましたが、必要なことを正確に実行するtableHoverプラグインを見つけました。

しかし：

IE6 では、セル要素の数がページがほとんど応答しなくなるまで増加すると、このプラグインのパフォーマンスが低下します。

問題はプラグインにあると思い、同じパフォーマンスの問題があることを発見するために、実際に機能全体を最初から書き直しました。

コードをデバッグした後、大量の要素を選択してclassName ( jQuery.addClass() ) を適用すると、IE6 では非常に遅いことがわかりました。

代わりにjQuery.css()をbackground-colorのみで使用しようとしましたが、パフォーマンスは向上しましたが、表のセルの数が増えるとパフォーマンスが使用不能な状態に低下し、他のすべてのブラウザーではjQuery.cssのパフォーマンスが低下します()はjQuery.addClass()よりもかなり遅いです。

ここでの主な問題は、テーブル列に共通の親がないことです。そのため、列をスタイルするには、テーブル全体を走査し、各行を選択してから、正しいnth-child tdを見つける必要があります。このための私のjQueryコードは次のようになります。

//col_num is the current td element
//table is the parent table    
var col_num = cur_cell.prevAll().length + 1;
var this_col = $('tr td:nth-child(' + col_num + ')', table);

この問題とは関係がないため、コード全体をここに貼り付けることはしません。私が探している唯一の答えは、より良いパフォーマンスマージンで必要なことを行う既知の方法はありますか? 「Chrome」のパフォーマンス速度を探しているのではなく、「応答しない」よりも速いものを探しています。

タナクス

トム。

4

4 に答える 4

2

ブラウザの CSS マッチング エンジンに作業を任せることで、className の変更とその後のリフローの回数を減らします。たとえば、3x3 テーブルの場合:

<style type="text/css">
    .sel-row-0 .row-0 td, .sel-row-1 .row-1 td, .sel-row-2 .row-2 td,
    .sel-col-0 .col-0, .sel-col-1 .col-1, .sel-col-1 .col-1 {
        background: red;
    }
</style>

<table id="foo">
    <tr class="row-0">
        <td class="col-0">a</td>
        <td class="col-1">b</td>
        <td class="col-2">c</td>
    </tr>
    <tr class="row-1">
        <td class="col-0">d</td>
        <td class="col-1">e</td>
        <td class="col-2">f</td>
    </tr>
    <tr class="row-2">
        <td class="col-0">g</td>
        <td class="col-1">h</td>
        <td class="col-2">i</td>
    </tr>
</table>

これで、外部テーブルの className を「sel-row-(num) sel-col-(num)」に設定するだけで、すべてのセルが一度に更新されます。これは、ループしてクラスを設定するよりもはるかに高速です。

非常に多数の列/行の場合、スタイルシートのデータ量が扱いにくくなる可能性があります。document.styleSheets リストを介してスタイルシートのルールを動的に変更することで、これを少し回避できますが、これには、jQuery では役に立たないクロスブラウザー作業が必要です。または、たとえば、行が多く列が少ないテーブルの場合、選択された行のクラスを行に直接配置し、この方法で列の強調表示のみを行うことができます。これは、まだ 2 ～ 3 クラスの変更です。

(jQuery セレクターで行ったように、CSS3 の nth-child セレクターを使用できればよいのですが、ブラウザーのサポートはまだありません。)

于 2009-09-10T00:43:46.817 に答える
2

IE6の非常に大きなテーブルでパフォーマンスが複雑な jquery を扱ってきました。ヘルプの観点から私が提供できるものは次のとおりです。

  • html 内のできるだけ多くのデータをエンコードします。たとえば、TDs クラスまたは名前属性の行番号と列番号をエンコードします。
  • テーブル全体にマウス リスナーを追加し、event.target を使用して TD を取得します。
  • ポイント＃1からホバリングしているセルの位置を解析します
  • 繰り返しますが、おそらく大量のクラスを追加する必要がありますが、各列と各行にクラスがあり、2 つのクラスセレクターで行全体と列全体の両方を選択し、それらに css を追加できます。
  • 可能な限りキャッシュします。ユーザーがあるセルから別のセルに移動した場合は、既に強調表示されている行にあるかどうかを確認します。これが起こることはほぼ保証されていると思うので、セレクター操作の 1/2 が必要になります。
  • 選択した列全体をキャッシュしないため、行と同じように 2 回選択する必要はありません
  • 私が書いたこのレスポンシブプラグインをチェックしてください。あなたはそれを使いたくなるかもしれません。
  • また、高速な jquery プラグインの作成に関するトピックについて私が書いた別の投稿があります。
于 2009-09-10T00:15:23.020 に答える
1

jQueryからより良い応答性を探しているときに、木の森が見えないのではないかと思います。

テーブルの上部に要素を含めて<colgroup>（明示的に、または必要に応じてjQueryを使用して動的に追加することにより）、選択したセルのインデックスに一致する列に背景色の値を割り当ててみませんか？

IE6は<colgroup>要素をサポートしますが、限られたプロパティでのみサポートします。ただし、background-colorはサポートされているものの1つであるため、パフォーマンスが大幅に向上するはずです。

于 2009-09-09T23:34:38.757 に答える
1

私はこれに注意する必要がありました-私はJavascriptよりもはるかに優れたCSS / HTML開発者であり、JSを掘り下げる前に、知っているすべての非スクリプトメソッドを試しました。

私は実際にはcolgroupから始めました。同じテーブルの列幅にも使用していますが、colgroup要素とcol要素は視覚的にテーブル要素の背後に設定されているため、tbody、tr、tdまたはテーブル内の他の要素に背景がある場合 (私の場合、それらの多くは持っています)、colgroupはこれらの要素の上に表示されず、配置やその他の高度な CSS 操作に応答しませんでした。

于 2009-09-09T23:49:50.870 に答える