3

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.

Herland Cid
  • 574
  • 1
  • 6
  • 23
  • 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 Aug 08 '13 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 Aug 08 '13 at 15:45
  • yes @pmandell but do you have to put all of your javascript code inside one $(document).ready function ? – Herland Cid Aug 08 '13 at 15:46
  • 1
    @HerlandCid you're already doing that, so you already know the answer to that... – Kevin B Aug 08 '13 at 15:46
  • you're right @Kevin some things just don't work without this $(document).ready – Herland Cid Aug 08 '13 at 15:48
  • 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 Aug 08 '13 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 Aug 08 '13 at 15:50
  • What @KevinB said, and `$(document).ready` is often an entry point of sorts so having more than one might be confusing unless its well documented. – go-oleg Aug 08 '13 at 15:52

3 Answers3

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 computer that impact JS performance in a browser).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
2

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.com/ready-callback-function-vs-document-ready-function/6 - my machine running Chrome can assign around 325,000 document ready handlers per second.

michaelward82
  • 4,706
  • 26
  • 40
1

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.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375