Where to include JS files - does it matter?

views:

answers:

+1 Q:

Where to include JS files - does it matter?

A few questions today :)

I am using Codeigniter. I have a header view, containing my tags which contains the universal JS file loads.

It also contains the 'layout' of the page, links etc, sidebar, and then it opens the tag and main content . This is closed in my footer view which is loaded after and 'content' view.

In one particular controller, i get data using a method, pass it to a 'content' view, this then sets this php data to a js var (a small block of inline js), and then i include a page specific js file which uses this data. This is in my body. Is this OK?

Thanks

+4 A:

Modern "best practice" advice is to include your Javascript files at the end of the <body>, if possible. That lets your content arrive and render without your Javascript execution slowing the browser down.

Sometimes that's problematic - for example, some server-side frameworks drop little bits of Javascript around page elements, and those might have dependencies on Javascript libraries.

Pointy 2010-09-12 12:45:19

Well, it's not that JS exectution slows stuff down, it's that retrieving external JS files blocks other HTTP requestst... for example: http://vidasp.net/tinydemos/why-you-should-put-your-scripts-at-the-bottom.jpg

Šime Vidas 2010-09-12 12:57:45

@Šime Vidas: It can, of course, be both. :-) Agreed, though, in 99% of cases I suspect download (even just the conditional If-Modified-Since GET) will be the main problem. But the OP isn't downloading anything (or executing anything of significance).

T.J. Crowder 2010-09-12 13:01:52

I think from semantic point of view it is better to place all script tags in the head tag.

pepkin88 2010-09-12 14:47:29

@pepkin88 What is the semantic meaning of a `<script>` tag? You're free to put them wherever you like, but read up on current literature about page rendering optimization and you'll see the same advice all over the place.

Pointy 2010-09-12 15:03:19

I understand that performance wise your solution is better, but originally JavaScript was meant to be placed in <head> as something invisible. The reason why it can be put in <body> is document.write(). In some cases I would like to have in <body> only displayable tags. Of course, for better performance scripts (one merged script is the best) should be embedded near to </body>.

pepkin88 2010-09-12 16:15:08

+1 A:

For a script block creating a var from a literal rather than downloading a JavaScript file or doing significant processing, no, it's not going to matter much if at all. But unless you care where the var is declared, doing it at the bottom of the body tag as Pointy suggested is still probably your best bet. Even though you're not doing anything, there's the handoff from the HTML parser/renderer to the JavaScript interpreter to consider, which while trivial is, I suppose, non-zero...

T.J. Crowder 2010-09-12 13:06:29

Page rendering optimization people obsess over lots of stuff like this. Heck, it's almost *gauche* to pull scripts in with a plain `<script>` tag instead of LabJS or RequireJS :-)

Pointy 2010-09-12 15:04:39

Take a look at LABjs & RequireJS: Loading JavaScript Resources the Fun Way. That technique really helps IE7, which can't load scripts in parallel.

Kevin Hakanson 2010-09-12 18:45:08

ansaurus

tags:

views:

answers:

Where to include JS files - does it matter?

related questions