2012-02-09 4 views
2

パフォーマンス上の問題があります。 私は500行のテーブルを持っています。その中に列を隠そうとしていて、待ち時間が10秒近くあります。誰が私にこの問題で速度を向上させるためにどのようなアドバイスを与えることができ、私はテーブル内の行を非表示にするときのjQueryパフォーマンス

jQuery('.c2').hide(); 

のようななめらかを使用

<table> 
<thead> 
<th class="c1">ColumnName1</th> 
<th class="c2">ColumnName2</th> 
</thead> 
<tbody> 
<td class="c1">data</td> 
<td class="c2">data</td> 
</tbody> 
</table> 

ありがとうございます!あなたはid要素を指定するとき

+0

50行にどれくらい時間がかかりますか? – ManseUK

+0

私はそれをクロムでテストします、50行hm ... <1秒 –

答えて

0

最初のjQueryのDOMトラバースは速く

$("#myTable .c2").hide(); 

や文脈に

$('.class', '#class-container').hide(); 
1

五百行を追加するには非常に多くなっているので、私はあなたには、いくつかに実行する可能性があることを理解しパフォーマンスの問題。より具体的なセレクターを提供しようとすることで、始めることができます。インスタンスのためにこれを試してみてください:

    jQuery('td.c2').hide(); 
    

    するか、それがさらに具体的にするために、あなたのテーブルにIDを追加します。また、便利なjQueryのセレクタのパフォーマンスについては、この記事を見つけるかもしれない

    jQuery('#yourTableId td.c2').hide(); 
    

  • jQuery Performance Rules

何に基づいてその記事の中で述べてingが、あなたはおそらくこのような何かを行うための最善のようになります。

jQuery("#yourTableId").find("td.c2").hide(); 

// Or if you intend to do more than one operation on your set of elements, 
// cache the set of elements in a variable, so that the selector is only run once 

var myElements = jQuery("#yourTableId").find("td.c2"); 
myElements.hide(); 
myElements.remove(); // Do some other stuff to your elements 

// Or make use of the chaining 
jQuery("#yourTableId").find("td.c2").hide().remove(); 
+0

サンクス、私は今それを使用しようとし、その後、私は結果を言う。 –

0

私はあなたが最初のIDでテーブルを選択して、().find使用している場合、それはもう少し速くなると思います。テーブルを選択すると、ドキュメント全体を検索するのではなく、検索のコンテキストが設定されます。

また、クラス別に選択するときに、tagNameを事前に作成することもできます。

$("#myTable").find('td.c2') 
0

より効果的なセレクタを使用できます。 たとえば、テーブルにidを入力し、クラスc2のtdの各行ごとに検索します。

jQuery("#table_id > tr > td.c2").hide(); 

セレクタ「>」を使用すると、jQueryは直接の子を選択し、親のすべてのタグを検索しません。

0

ようですが、実際には、異なるものに依存します:あなたがテストしているブラウザ(Internet Explorer 7および8は、レンダリングとJSエンジンの全体的な面でChromeとMozillaのよりもはるかに遅いです)

あなたはおそらく、サーバーのSIDでこの問題を解決すると考えてください列ごとに非表示にする必要があり、HTMLの量e(ASP、JSP、PHPなどを使用している場合)、操作されたHTMLを返送します。今日、人々はすべてが純粋なjavascriptで処理できると思っています。現代のWebブラウザはますます高速化していますが、従来のサーバーサイドのWeb開発が道を行くユースケースはまだあります。

もう一つは(あなたがテストするためだけで何か):(。hide()を呼び出すときにjQueryで使用されている

0

それは再び私です。) たぶん、あなたはvisibility: collapse代わりのdisplay: noneを使用して試すことができます 私が話をしたいですどのようにこの問題を決めるのですか
私はコンフルエンスと私のやり方で仕事をしている間、パフォーマンスを向上させる必要があります。
このアクションでは、私はhtmlコードでjsonを生成してからそれを送り返します。 このコードは、フィルタパラメータに対応するテーブルのデルタです。私はコンフルエンスキャッシュの利点も利用しています。最後のperfomanseの結果は100ms未満です。ビンゴ)) すべて返信用

p.s. 2Christofer Eliasson パフォーマンスルールを使用しようとしましたが、パフォーマンスはそれほど向上しませんが、有用なリンクがありがとうございます。私は将来この良い習慣を使用しようとします)

関連する問題