Slow performance with jQuery selector

Question

I'm rendering over 600 forms in an MVC format (php Codeigniter). Each one of these forms has a button labeled "More Options". When you click this button - a hidden div, located in the same parent element, is toggled, displaying more input fields and data. The problem is that the sibling toggle is quick in console, but when I click the actual button, it takes very long to trigger.

Using id's is the recommended fix, but it is slightly impractical when I have this many div elements to go through.

Here is my js file

jQuery(document.ready(function(){
    jQuery("form >button[name='more_data'].meta_button").click( function(){  
        jQuery(this).siblings("div.meta").toggle("fast");
    });
});

Here is the structure (there are 650 of these div's, with more to come)

<div>
    <li id="bCIya8DZyr4idseJe5cbLA" class="even">
        <form action="url" method="post" accept-charset="utf-8">
            <div class="space_name"></div>
            <button name="more_data" type="button" class="meta_button">More Options</button>
            <input type="submit" name="Submit" value="Submit">
            <div class="meta" style="overflow: hidden; display: block;">
                <div class="meta_block">Set Estimates:
                    <div class="input_estimate">1:
                        <input type="number" name="estimate_1" value="" id="estimate_1" class="estimate">
                    </div>
                    <div class="input_estimate">2:
                        <input type="number" name="estimate_2" value="" id="estimate_2" class="estimate">
                    </div>
                    <div class="input_estimate">3:
                        <input type="number" name="estimate_3" value="" id="estimate_3" class="estimate">
                    </div>
                </div>
            </div>
        </form>
    </li>
</div>

Note: I'm running jQuery 1.7.2

You could try using .nextAll() instead of .siblings(). Why do you have so many forms? — Blender
– Blender, Commented Mar 21, 2013 at 19:56
Are you sure there isn't a rendering problem ? Like a complex reflow and costly CSS rules ? The code we see looks pretty fast in my experience. — Denys Séguret
– Denys Séguret, Commented Mar 21, 2013 at 20:01
attribute selectors are slow; if you don't really need it I would remove it and just select by class. — magritte
– magritte, Commented Mar 21, 2013 at 20:04

Harry Dobrev · Accepted Answer · 2013-03-21 20:13:09Z

3

Don't use a delegate

Using a delegate (.on() with a selector) like @jrummell suggested is faster when you have multiple event listeners, because you reduce the number of listeners to one.

Simpler selector using a class

So in this case though I would recommend using a simpler selector:

$(function(){
    $('.meta_button').on('click', function(){
        $(this).siblings('div.meta').toggle('fast');
    });
});

This way you have quite simpler selector and less checks when a click is triggered, because there is no delegate. Also the clicks on other elements in the forms are not captured.

Animations slow things down

An animation could slow things down. An animation which is performed over multiple elements simultaneously even more.

Try moving all div.meta elements in a single parent and applying animation only on that single element.

You could also remove the animation entirely by just using toggle() (the comment about the multiple items is still valid in this case).

Example:

$(function(){
    $('.meta_button').on('click', function(){
        $(this).parent().find('.meta_holder').toggle();
        // OR
        // $(this).next('.meta_holder').toggle();
    });
});

edited Mar 21, 2013 at 20:13

answered Mar 21, 2013 at 20:02

Harry Dobrev

7,7172 gold badges50 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Fuhton Over a year ago

This did speed up the rendering slightly. Milliseconds shaved off.

Harry Dobrev Over a year ago

@Fuhton Rendering is an entirely different world. You asked about the speed of the jQuery selectors and stuff.

Huangism Over a year ago

what browser are you using? rendering stuff could be slow in particular browsers and fast in others

Huangism Over a year ago

if there is an ID which contains all of the meta buttons, you should add that to the selector as well

Huangism Over a year ago

$('#containerID').find('button.meta_button').on(...) will be faster then just $('.meta_button').

|

Fuhton · Accepted Answer · 2013-03-21 20:12:12Z

0

Including jQuery.ui.css made the redisplay incredibly slow. Costly css rules killed the display and slowed down rendering times. The "nudge in the right direction" is in the comments of the question.

answered Mar 21, 2013 at 20:12

Fuhton

1377 bronze badges

2 Comments

Harry Dobrev Over a year ago

This solves your problem, but does not answer your question. It should be a comment to the question IMHO.

Fuhton Over a year ago

The question was why does the jQuery take so long to trigger. The answer was because of costly css rules.

Collectives™ on Stack Overflow

Slow performance with jQuery selector

2 Answers 2

Don't use a delegate

Simpler selector using a class

Animations slow things down

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Don't use a delegate

Simpler selector using a class

Animations slow things down

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related