0

My question is - is it ok to put javascript additional code (<script>...</script> tags containing simple things like validation etc - not linking to any external source) somewhere to the top inside of the <body> section ?

Is there any difference between placing it there and placing the code inside of the <head> section?

I want to create a layout file with one head section. Each templates will have different js parts of code - creating external links to .js files will disable the possibility of adding PHP tags, so I have to find another way.

Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291
user2124857
  • 39
  • 1
  • 1
  • 9
  • "creating external links to .js files will disable the possibility of adding PHP tags" - Not so if you host the JavaScript files on your server, and configure your server to run .js files through PHP before serving them. – Paul D. Waite Mar 04 '13 at 16:43

3 Answers3

6

Not only is it fine to put script tags in the body element, unless you have a good reason for putting it in head, it's preferred to put it in the body element, ideally just before the closing </body> tag. That way, your main content (your markup) is presented to the user as soon as possible rather than waiting for script files to load / the JavaScript engine to be fired up and execute the script.

References:

Side note on your comment:

Each templates will have different js parts of code - creating external links to .js files will disable the possibility of adding PHP tags, so I have to find another way.

Ideally, try to find a way to make that just one file you load rather than a bunch of them. Each HTTP request has a significant amount of overhead. One of the recommendations you'll see in the first link above is to minimize the number of HTTP requests.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • I place all my jquery at the very bottom of the page. I like to have all the markup at the top and all the script at the bottom. Easier for me to see what I want to see. – Mike C. Mar 04 '13 at 16:37
  • According to your edit - yeah, however, almost every file includes jquery, validation plugins, date widgets, and other things like that - it all makes quite a lot of http request, and I don't know if there's a way to minimize this... – user2124857 Mar 04 '13 at 16:43
  • Because it's mostly jquery - forgot to mention this, though eventually it's javascript :P – user2124857 Mar 04 '13 at 16:45
1

In fact, having it at the top is less per formant and a risky place to put it:

Just before the closing body tag

http://developer.yahoo.com/performance/rules.html#js_bottom

Put Scripts at the Bottom tag: javascript The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames. In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations. An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.

Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291
  • That doesn't really apply to the OP's situation though, as the OP is including JavaScript code directly in the ` – Paul D. Waite Mar 04 '13 at 16:42
1

As long as the javascript code is included before you call it on your page, it shouldn't make a difference if it's in the head or in the upper section of the body. It's a good idea to separate it if you're building a common header. That way, you're not calling in unused code.

Jonathan Carter
  • 231
  • 2
  • 4