[jQuery] Re: Interesting on document ready question

Excellent analysis, Ricardo. BTW, which browser did you run your timing test
in?

Here's another tip. If you really do need to have thousands of ready
functions, you can speed things up a bit by rolling your own. For example:

window.ready = [];
jQuery(function() {
for( var fn, i = -1; fn = ready[++i]; )
fn( jQuery );
});

Now you can replace each instance of:

$(function() { ... });

With:

ready.push( function() { ... } );

Or, for a bit more of a speedup in IE:

ready[ready.length] = function() { ... };

-Mike

> From: Ricardo Tomasi
>
> Hi Kean,
>
> AFAIK, ready() puts the function you passed into an array of
> functions. Another function is bound to the DOMContentLoaded
> event, which is fired when the DOM is ready on compliant
> browsers. For the others, several methods are in place to
> detect when DOM is loaded.
> When the event fires/DOM load is detected, that function
> starts calling each of the functions in that array.
>
> Was I clear? :D
>
> In short, ready() stacks functions that will get executed
> when DOMContentLoaded fires or the other browser techniques
> detect DOM is complete. The slowness in this comes mostly
> from the overhead of jQuery's methods. When you call $()
> jQuery has to:
> 1. check if you're passing an object/function/array/selector
> string 2. grab the 'document' object (default) 3. return the
> jQuery object with document 4. call the ready() method on
> that object passing your function 5. store the function in an array
>
> that's quite a bit of overhead. this:
>
> (function(){
> console.time('a');
> for (var i=-1;i<5000;i++){
> $(function(){});
> }
> console.timeEnd('a');
> })();
>
> takes around 200 ms here.
>
> $(document).ready() is a bit faster, around 90ms, probably
> because it doesn't run as many conditionals to guess what you want.
>
> hope that was helpful!
>
> cheers,
> -ricardo
>
>
>
> cheers,
> - ricardo
>
> On Dec 31, 1:49 am, Kean <shenan...@gmail.com> wrote:
> > No, I don't take that as an insult.
> >
> > I was just wondering how document ready was coded so it really was
> > just a hypothetical question.
> >
> > Why do I really need so much on ready?
> >
> > Also, MorningZ, I will be very active in the jQuery mailing list in
> > future to learn more js. Perhaps this is not the best
> starting point
> > for us.
> >
> > On Dec 30, 7:23 pm, MorningZ <morni...@gmail.com> wrote:
> >
> > > "There probably is a better way to do it. "
> >
> > > Which is what i was getting at......   i hope "honest"
> isn't/wasn't
> > > taken as "insulting"
> >
> > > On Dec 30, 10:16 pm, "Michael Geary" <m...@mg.to> wrote:
> >
> > > > Come on, MorningZ, there's no need for insults.
> >
> > > > But yes, 5000 of those will be pretty slow - and that's
> before you
> > > > even execute the code inside those functions. How slow?
> It's easy
> > > > to test. The ready functions are run in the order that the $()
> > > > functions are called. So simply do this in a test page:
> >
> > > >     var t1 = +new Date;
> > > >     $(function(){});
> > > >     // ... Repeat above line 5000 times
> > > >     $(function() {
> > > >         var t2 = +new Date;
> > > >         alert( (t2-t1)/1000 + ' seconds' );
> > > >     });
> >
> > > > You can easily generate that file by hand in a text editor. You
> > > > don't have to do 5000 pastes. Start with 10 of them, copy that
> > > > block and paste it 10 times so you have 100, copy
> *that* block and
> > > > paste it 10 times so you have 1000, copy that and five
> more pastes and you're done.
> >
> > > > Test it in IE6 (!), and if you're on your usual development
> > > > machine, triple the time from the alert to take into
> account the
> > > > slower machines that your visitors will have (think a
> slow laptop
> > > > running on battery). If you don't have IE6, try it in
> IE7 and as a
> > > > rough guess, multiply your observed time by six (triple
> for the slow machines, double again for IE6).
> >
> > > > Mind if I ask: why do you need 5000 of these? There
> probably is a
> > > > better way to do it.
> >
> > > > -Mike
> >
> > > > > From: MorningZ
> >
> > > > > If you've got 5000 of those, it's *seriously* time to
> reconsider
> > > > > your coding techniques.....  depending on that much
> JavaScript
> > > > > is just plain old stupid......
> > > > > On Dec 30, 8:59 pm, Kean <shenan...@gmail.com> wrote:
> > > > > > Is document ready "actually" an event handler?
> >
> > > > > > Let's say I have
> >
> > > > > > $(function(){
> >
> > > > > > });
> >
> > > > > > $(function(){
> >
> > > > > > });
> >
> > > > > > $(function(){
> >
> > > > > > });
> >
> > > > > > $(function(){
> >
> > > > > > });
> >
> > > > > > $(function(){
> >
> > > > > > });
> >
> > > > > > etc ..... around 5000 of those.
> >
> > > > > > Will it actually degrade performance like 5000 bind()?
> > > > > > My guess is not much performance penalty, but
> again, it's a guess.
>