montrer/cacher dans jquery est rapide. mais le moteur de rendu est de ralentir

Question

J'ai un problème de performance quand cacher/montrer tous les « éléments » tr.content au sein d'une structure de dom comme celui-ci:

   <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> 

pas étonnant. car il y a parfois 400 éléments de corps dans cet arbre dom.

essayé de nombreuses approches et regardé http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance mais le javascript est assez rapide. il semble que le moteur de rendu (peu importe si navigateur webkit ou firefox) semble avoir besoin de temps => freeze navigateur :(

Puis-je en quelque sorte accomplir cette opération sans geler le navigateur (ça ne me dérange pas si cela prend un certain temps, aussi longtemps que le navigateur ne bloque)?

changer tristement la structure de dom est aucune option (ie nous utilisons trieuse de table aussi).

Answer 1

Avez-vous essayé d'utiliser des règles CSS et simple ajout d'une règle unique au parent? (cela devrait être le plus efficace, et si les navigateurs s'étouffent sur ce alors vous êtes hors d'options je pense ..)

.hideChildren .collapsible tr{display:none;} 

et attacher la classe hideChildren à un seul ancêtre (par exemple la balise body) de tous les tbody nœuds.