With the amount of jQuery tutorials being written, tweeted, and retweeted I keep seeing one common theme in nearly all of them. None of them use the jQuery shorthand to launch their scripts when their DOM is loaded.
Of course there's nothing wrong with this and it is perfectly valid, but if you are able to cut out code, that means you cut down on development. If you are familiar with jQuery then you're most likely familiar with starting your scripts like so:
$(document).ready(function() { //your code here });
Well, after actually taking the time to read through some jQuery documentation, I've discovered an easier, although more abstract way of writing this:
$(function() { // your code here });
That's all there is to it! You can get rid of (document).ready altogether. Enjoy!
UPDATE: The two methods are exactly the same, at least from what I can tell from my tests. The one exception is file size which saves 15 bytes or 16 bytes when gzipped. Special thanks to Kenneth (@ellisgl) for the test.
OK my tests.
if(!ob_start('ob_gzhandler')) { echo 'NO GZ'; ob_start(); } echo '<script type="text/javascript"> $(document).ready(fuction() { }); </script>'; ended up with 93 bytes <?php if(!ob_start('ob_gzhandler')) { echo 'NO GZ'; ob_start(); } echo '<script type="text/javascript"> $(fuction() { }); </script>'; Ended up with 77 bytes So you ended up with 16 Bytes worth of savings on this super simple test.Thanks for running the above tests! Much appreciated!
Awesome. Saved a byte and made your code more abstract and difficult to read.
++. This is a stupid optimization that doesn't save you anything worth saving and hurts the code.
i agree with posts above.
when your work is going to be shared, all these shorcuts tends to make it less readable
$(document).ready() is expressive on what the coder mean to do
$() is just for those who used pretty extensively jquery before, and in a team, you can't
assume there are only JQuery experts
So is the better solution to comment the $() use ? Well, you'll need more than 16 bytes to explain it !
just my 2 cents
dazz_x
While it is great to know there is a little less code that needs to be written for my jQuery stuff to work, I have to wonder if 16 bytes is really a big deal. I am sure from a min/max approach, cutting even 1 byte out of code is huge, but what does removing 16 bytes do for load times?
While it may help people avoid errors in writing the initial code, does it have any perceivable impact on load times?
First and foremost let me say that I'm not doing this to save 16 bytes. Ellis was just curious what it would be gzip'd so after a discussion he ran some tests and I added it to the post.
Furthermore, I agree, to an extent, that it makes the code slightly less readable, but no more than saving a measly 16 bytes. And personally, if you AREN'T a jQuery developer the syntax above is easier to write and easier to remember imo. And if you ARE a jQuery developer it saves time, especially in larger projects.
In the end it's a preference of syntax, so if given two options, I'll often choose the one that's easier to type. Personal preference I guess. Nonetheless, the comments are greatly appreciated and valid points have been raised.
I do agree with the unreadable part, but if you are a bit pincher (penny pincher for bandwidth) this would get you 16 bytes of reduction. Of course the thing I didn't test is a real page. GZiping the output on this example did add quite a bit of over header. Since I'm lazy I didn't try to a heavy page test.
With the note above, an article about when to or not GZ your output should be made. Or a PHP script that can determine that. A template system would have to be in place, then you have to think about the overhead on the server side. Variables, gotta love them.
Post new comment