I am working on a website project. The person in charge of the project tells me that it's not right to keep two or more $(document).ready .Does it affect performance? I prefer to keep multiple $(document).ready because I have lots jquery code, and it's a good way to divide blocks of code.

I am working on a website project. The person in charge of the project tells me that it's not right to keep two or more $(document).ready .Does it affect performance? I prefer to keep multiple $(document).ready because I have lots jquery code, and it's a good way to divide blocks of code.

• javascript
• jquery

Share Improve this question Follow asked Aug 8, 2013 at 15:42 Herland CidHerland Cid 57411 gold badge77 silver badges2424 bronze badges 8

• 1 Well, every handler ads extra work to do, but adding a couple of document ready handlers won't have any noticiable performance impact. – Claudio Redi Commented Aug 8, 2013 at 15:44
• 1 No, it will not affect performance. However, i would argue that you probably have a lot of code that doesn't necessarily need to be inside the $(document).ready to begin with. – Kevin B Commented Aug 8, 2013 at 15:45
• 1 @HerlandCid you're already doing that, so you already know the answer to that... – Kevin B Commented Aug 8, 2013 at 15:46
• 1 Right, but the only part that needs to be inside the document ready is the parts that initiate the code. You could just as well place all of the functionality in self-contained pieces, then initialize those pieces inside the document ready. – Kevin B Commented Aug 8, 2013 at 15:50
• 1 I write multiple $(document).ready and it's been fine. The code inside of the $(document).ready is a whole-nother story :). Since you write so much jQuery code then I assume you know this already but I just want to state it for any Googler's that find this page. The main disadvantage is variable and function scope. – MonkeyZeus Commented Aug 8, 2013 at 15:50

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 6

It is an extra function call, so of course it affects performance.

It won't affect it in any significant way. It probably won't even affect it in any measurable way (given all the other variables on the typical puter that impact JS performance in a browser).

So long as your $(document).ready handlers do not duplicate functionality, then the performance impact of a 2nd handler is likely to be imperceptable.

Accodrding to this jsperf benchmark - http://jsperf./ready-callback-function-vs-document-ready-function/6 - my machine running Chrome can assign around 325,000 document ready handlers per second.

It's a few more function calls (the ready method, functions inside there, and the handler itself), but that won't hit performance significantly.

It's a good way to divide blocks of code.

And that's why it should be used. Not only for readability and maintainability, but also the handlers will have different scopes and garbage collection can work more efficient, which can enhance performance.

Of course, there might be better ways to reach that aim. The divisions should be using the module pattern (loading work off the ready event, to the point where the declaration is interpreted), and you then might as well call the init functions of all modules in a single ready handler instead of letting every module install its own handler.