if i'm using jquery library with some plugins can i place all at bottom , just before </body> or it depends?
are there some situations where library+plugin should place in not at end of not bottom?
views:
67answers:
4
+1
Q:
if i'm using jquery library with some plugins should i place all at bottom , just before </body>
A:
Reigel
2010-01-28 08:37:53
explain a reason why you'd do this? I want to see your reasoning, as Yahoo! disagrees, and they're probably right. http://developer.yahoo.com/performance/rules.html#js_bottom
Dan Beam
2010-01-28 08:42:55
that is how I use it...
Reigel
2010-01-28 08:43:39
yeah you are right!.. I did not know that... :)
Reigel
2010-01-28 08:45:05
(-1) It is usually considered best practice to put your javascript at the bottom of the page just before the end of the body tag, not in the head tag. The reason for this is that the browser can't continue loading other resources while its executing javascript. And you usually want your html and all images etc to be rendered before you run any javascript.
Mattias Jakobsson
2010-01-28 08:46:47
I feel that jQuery's doc are misleading, though, as that's what they say on the page he linked to. shame on them.
Dan Beam
2010-01-28 08:48:06
negative for me cause here I am following jQuery's doc....
Reigel
2010-01-28 08:50:23
@Reigel: Yeah, being penalized for following mistaken advice sucks; even if it's the jQuery doc that gives such sub-optimal advice. -0 from me.
Piskvor
2010-01-28 09:08:26
+1
A:
yes, place at the bottom of the page before </body> for fastest load time.
http://developer.yahoo.com/performance/rules.html#js_bottom
technically you could put it at the top of the page like Reigel is suggesting, but it locks up the whole page's execution, which is lame. the best idea would be to do it parallely, where you simply add the script as a DOM Node after the DOM has been loaded, if possible (if it doesn't mess up your page):
$( function(){ $( 'body' ).append( '<script src="plugin.js"></script>' ); } );
also, there is seriously a thread on this subject every week. search first.
Dan Beam
2010-01-28 08:46:29
i search but haven't found any good question with jquery. my question is related to only jquery and plugins. my question is can i place all at bottom
metal-gear-solid
2010-01-28 08:50:03
Then I have a question, why are a lot of pages now are still using this `"lame"` way of putting the scripts? :)
Reigel
2010-01-28 08:52:38
@Reigel: Because a lot of people don't *know* that there *is* a measurable difference, and because "we have always done it like that". A lot of pages done with the "lame" method still doesn't make the method non-"lame".
Piskvor
2010-01-28 09:03:54
Well, to my point of view, yeah it's best practice to be optimal, but it would still depend on who are your users on the page that you do, why take out to your convention when you can still live in it? even google.com still has some of their scripts on head tag. It's just a matter of balance I guess.
Reigel
2010-01-28 09:28:19
Well, I learned a lot today... especially "following jQuery docs"... cheers!!!
Reigel
2010-01-28 09:31:19
A:
As much as I know you should move JS from head to the body, as it does not delay of the page rendering itself, but the loading of other external scripts (css). I moved it to the bottom of the page, just to easily find it when looking at the source code..
harpax
2010-01-28 08:48:08
A:
The real reason behind putting everything at the bottom, right before the </body>, is so that your pages renders fast.
It is an optimization technique, that allows your page to show up in the browser before everything is loaded, if you put all your javascript at the top, the page will look blank until it has finishing loading the scripts, and the user will feel your site is very slow and probably leave.
So, it doesn't matter where you put it, it will still work, the difference is that you let your visitors, see some content and even click on a link even before all the javascript is loaded.
@Dan Beam: Placing your css at the bottom, might show the first render of the page in a weird way, because the CSS is not yet loaded.
UberNeet
2010-01-28 08:57:35
but sifr 3 js and css is suggested to add at top in <head> to render sifr text before the page load
metal-gear-solid
2010-01-28 09:13:40
I am not entirely sure about this, but in the case of sifr 3, is probably because it needs to setup variables required for the flash in the text replacement.
UberNeet
2010-01-28 09:45:28
I did a quick read of the code, and it looks that it initializes on the document onload event, so either way, your text won't get replaced until all scripts are loaded.
UberNeet
2010-01-28 09:54:15
Yes it should be fine. Try placing it at the top, once you got it working, try placing it at the bottom and see if it works. The important thing is that you understand the difference between the places and how it affects the page rendering, so you know how to tweak your pages to fit YOUR needs.
UberNeet
2010-01-28 10:51:56