複数の要素にclassNameを追加する際のIE6パフォーマンスの問題（jQuery tableHoverプラグイン）

StackOverflow https://stackoverflow.com/questions/1402617

質問

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

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

しかし：

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

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

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

背景色のみで代わりに jQuery.css（）を使用しようとしましたが、表のセルの数が増えるとパフォーマンスが向上します使用できない状態になり、他のすべてのブラウザでは、 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);

このコードは問題に関係ないため、ここにコード全体を貼り付けません。 私が探している唯一の答えは次のとおりです。より良いパフォーマンスマージンで必要なことを行う既知の方法はありますか？ <！> quot; Chrome <！> quot;を探していません。 <！> quot; non responsive <！> quot;。

よりも速い速度

スナック

トム。

役に立ちましたか？

解決

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

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

他のヒント

ブラウザの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を<！> quot; sel-row-（num）sel-col-（num）<！> quot;に設定することだけです。すべてのセルが一度に更新されるため、クラスをループして設定するよりもはるかに高速になります。

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

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

jQueryからより良い応答性を検索する際に、木の森が見えないのではないかと思いますか？

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

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

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top