show/hide in jquery ist schnell. aber Rendering-Engine langsam

Question

ich ein Performance-Problem haben, wenn versteckt/zeigt alle „tr.content“ Elemente innerhalb einer dom Struktur wie folgt aus:

   <tbody class="collapsible"> 
       <tr class="handler"> 
           <td>Collapsible Handler</td> 
       </tr> 
       <tr class="content"> 
           <td>Collapsible Content</td> 
       </tr> 
   </tbody> 

    <tbody class="collapsible">...</tbody> 

    <tbody class="collapsible">...</tbody> 

    <tbody class="collapsible">...</tbody> 

    .... 

</table> 

kein Wunder. weil es manchmal 400 tbody-elemente in diesem dom-baum gibt.

versuchte viele approches und schaute in http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance, aber das Javascript selbst ist ziemlich schnell. Es sieht so aus, als ob die Rendering-Engine (egal ob Webkit-basierter Browser oder Firefox) etwas Zeit braucht => Browser-Freeze :(

Kann ich diesen Vorgang irgendwie durchführen, ohne den Browser einzufrieren (es macht mir nichts aus, wenn es dauert einige Zeit, solange der Browser) abstürzt nicht?

leider die dom Struktur zu verändern keine Option ist (dh wir Tabelle Sortierer zu verwenden.)

Answer 1

Haben Sie versucht, CSS-Regeln verwenden und das Hinzufügen von nur (sollte dies die effizienteste sein, und wenn die Browser auf diese dann ersticken Sie sind out von Optionen denke ich ..)

.hideChildren .collapsible tr{display:none;} 

und die hideChildren Klasse zu einem einzigen Vorfahren (beispiels befestigen die body tag) aller tbody Knoten.