Is there any overhead to having multiple $(document).ready with jQuery 1.8.1

Question

I have code like this:

$(document).ready(function () {

    $('.accessLink')
        .bind('click', accessLinkClick);
    $('#logoutLink')
        .click(function (e) {
            window.location = $(this).attr('data-href')
        });

});

Functionality for each part of my site is divided into a number of small files and when the site is deployed these are mimified and joined up.

Each of these small files which number up to ten wait on $(document).ready. Can anyone tell me if there is much overhead in doing this. Splitting my code into functional areas has meant the code looks easy to maintain but I am just wondering about overhead now that I am using jQuery 1.8.1

Update:

Based on the answers I started to code like this:

$(document).ready(function () {

    accessButtons(); // login, register, logout
    layoutButtons();
    themeButtons();  // theme switcher, sidebar, print page

});

with each function then coded as:

function accessButtons() {

    $('.accessLink')
        .bind('click', accessLinkClick);
    $('#logoutLink')
        .click(function (e) {
            window.location = $(this).attr('data-href')
        });

};

There'll be a (very) small performance overhead, but presumably you're not noticing an issue when you test your web page(s)? If it simplifies maintenance maybe that's justification enough? — nnnnnn, Sep 10 '12 at 05:38
The overhead consists of multiple calls to `$().ready` (instead of one/few) and calling multiple callbacks (instead of one/few). But whether it has any impact on the performance of your site/application is another question. Most likely not. — Felix Kling, Sep 10 '12 at 05:39
Check out http://stackoverflow.com/questions/1327756/can-you-have-multiple-document-readyfunction-sections or http://stackoverflow.com/questions/1148241/jquery-is-it-bad-to-have-multiple-document-readyfunction http://stackoverflow.com/questions/5263385/jquery-multiple-document-ready — techie_28, Sep 10 '12 at 05:39

score 6 · Answer 1 · answered Sep 10 '12 at 06:11

Here's the difference between 10 $(document).ready() calls versus one that then calls 10 initialization functions.

With the 10 calls, you get:

10 calls to $(document).
10 calls to the .ready() method.
One event listener for the DOM ready event
When the DOM ready event fires, it then cycles through an array of callbacks and calls each callback passed to .ready().

If you have one $(document).ready() that then called all 10 of your initialization functions, you would have this:

1 call to $(document).
1 call to the .ready() method.
One event listener for the DOM ready event
When the DOM ready event fires, it then calls your one ready handler.
Your ready handler then calls the 10 initialization function calls.

So, the difference is approximately the time it takes to construct 9 extra jQuery objects and make 9 extra .ready() method calls. In extreme cases this could be noticeable, but it is unlikely that you would see a difference in practice.

score 3 · Accepted Answer · answered Sep 10 '12 at 05:40

3

If the code needs to be executed in order, then they should in the same dom ready callback function, otherwise, you could divide them into different dom ready callback.

answered Sep 10 '12 at 05:40

xdazz

158,678
38
247
274

3

I'd assume the callbacks are executed in the order they are added. – Felix Kling Sep 10 '12 at 05:41
@FelixKling - jQuery does guarantee to execute event handlers in the order they're bound (for a given element and event, of course), but in this case where the ready handlers are split across multiple source files there could be a maintenance issue because if order is important the files would have to be included in the right order. (I can imagine a situation where nine out of ten of the site's pages have them in the right order but the tenth doesn't...) – nnnnnn Sep 10 '12 at 05:48
@xdazz - I updated my question to show the way I am now coding. Does that look okay. I think it's okay but would appreciate a second opinion. – Alan2 Sep 10 '12 at 05:58

score 3 · Answer 3 · answered Sep 10 '12 at 05:43

3

Only use the .ready() function to wrap all code that needs to be run once ALL other code is loaded and once the page is ready. If you have any libraries that can run on their own and do not need to do anything with the DOM then you shouldn't need to put them into a ready call.

answered Sep 10 '12 at 05:43

matsko

21,895
21
102
144

Also keep in mind that the .ready() function will also only fire once all other – matsko Sep 10 '12 at 05:48
Thanks. I updated my question with the way I now coded it. Hope that's okay. – Alan2 Sep 10 '12 at 05:59
Putting everything into one document.ready() function call won't save you any performance and will make things more complicated (since you need to have the trigger functions fire in another file). So just stick to multiple .ready() operations and you should be fine. – matsko Sep 10 '12 at 06:04

score 2 · Answer 4 · answered Sep 10 '12 at 05:46

Performance goes down when using many $(document).ready() calls, but it doesn't seem to be too bad, and on some browsers it doesn't seem to affect performance very much at all. The linked page has test results for several popular browsers when using $() to modify a large DOM.

score 2 · Answer 5 · answered Sep 10 '12 at 06:10

Due to the performance issue, I personally create separate functions for each page. So instead of having $(document).ready() run multiple times, you just fire a function on each page. This way, i tend to generally have $(document).ready() only run twice, once for globals, then once for the particular page.

function ContactForm() {
    $(function () {
         // Contact form page specific stuff.
    });
}

In my View (by the sounds of your question, im assuming you're using MVC), what i do is add the following:

@section scripts {
    @Scripts.Render("~/bundles/ContactForm")
    <script type="text/javascript">ContactForm();</script>
}

Is there any overhead to having multiple $(document).ready with jQuery 1.8.1

5 Answers5