CODEWITHSUNDEEP
javascriptjqueryhtmlbrowserperformance
fetzig
fetzig

Reputation: 1664

show/hide in jquery is fast. but rendering engine is to slow

I have a performance issue when hiding/showing all "tr.content" elements within a dom structure like this: 

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

no wonder. because there are sometimes 400 tbody elements within this dom tree.

tried many approches and looked into http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance but the javascript itself is pretty fast. it seems like the rendering engine (no matter if webkit based browser or firefox) seems to need some time => browser freeze :(

Can i somehow accomplish this operation without freezing the browser (i don't mind if it takes some time, as long as the browser isn't crashing)?

sadly changing the dom structure is no option (i.e. we are using table sorter too).

Upvotes: 1

Views: 472

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

Have you tried using css rules and just adding a single rule to the parent ? (this should be the most efficient, and if the browsers choke on that then you are out of options i think..)

.hideChildren .collapsible tr{display:none;}

and attach the hideChildren class to a single ancestor (for example the body tag) of all the tbody nodes.

Upvotes: 1

Related Questions