Is there any overhead for having multiple $ (documents) .ready with jQuery 1.8.1

Question

I have a code like this:

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

The functionality for each part of my site is divided into several small files, and when the site is deployed, they are simulated and combined.

Each of these small files, which number up to ten, is waiting on $ (document) .ready. Can anyone tell me if there is any overhead at the same time. Dividing my code into functional areas meant that the code looked easy to maintain, but right now I'm just curious that I'm using jQuery 1.8.1

Update:

Based on the answers, I started writing as follows:

 $(document).ready(function () { accessButtons(); // login, register, logout layoutButtons(); themeButtons(); // theme switcher, sidebar, print page }); 

with each function then encoded as:

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

Answer 1

If the code needs to be executed in order, then they must be in the same callback function as in the same house, otherwise you could split them into another dom callback.

Answer 2

Here the difference between $(document).ready() 10 $(document).ready() calls against one, which then calls 10 initialization functions.

With 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 the callback array and calls each callback passed to .ready() .

If you have one $(document).ready() , which then calls all 10 of your initialization functions, you will have the following:

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

So, the difference is approximately equal to the time taken to create 9 additional jQuery objects and make 9 additional calls to the .ready() method. In extreme cases, this may be noticeable, but it is unlikely that you will see the difference in practice.

Answer 3

Use only the .ready() function to wrap all the code that should be run when ALL other code is loaded and as soon as the page is ready. If you have libraries that can run on their own and don’t need to do anything with the DOM, you won’t need to prepare them.

Answer 4

Due to a performance issue, I personally create separate functions for each page. So instead of having $(document).ready() run multiple times, you simply run the function on every page. Thus, I usually usually $(document).ready() only works twice, once for global, then once for a specific page.

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

In my view (based on the sounds of your question, assuming you are using MVC), I add the following:

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

Answer 5

Performance decreases when multiple calls to $(document).ready() , but it doesn't seem too bad, and in some browsers it doesn't. It looks like it has a big impact on performance. The linked page has test results for several popular browsers when using $() to modify a large DOM.