HTML script tag placement?

Question

Every once in a while I hear about placing HTML <script> tags later in the HTML document rather than in the <head> element.

Some people, or so I've heard, even advocate placing one's scripts as the last few tags before </body>.

Is this due to a performance issue? Perhaps loading up a script is a blocking IO operation, considering that script-dependent scripts are placed after other scripts like so:

<script src="jQuery.js"></script>
<script src="myScriptThatUsesjQuery.js"></script>

Even if that's the case, why would placing one's scripts near the end of the HTML document help?

Thanks!

possible duplicate of Where is the best place to put <script> tags in HTML markup? — bluish
– bluish, Commented Mar 26, 2013 at 15:31

user149341 · Accepted Answer · 2011-09-17 04:44:56Z

14

When a <script> tags appears within <body>, it pauses parsing of the document until it's been loaded (if applicable) and executed. This is so that old scripts which use document.write can do their thing.

Placing <script> tags last in the body keeps them from holding things up.

answered Sep 17, 2011 at 4:44

user149341

Sign up to request clarification or add additional context in comments.

1 Comment

Howdy_McGee Over a year ago

I agree with this. You shouldn't use Javascript for any kind of main functionality for your website (such as displaying large amounts of informative text) so placing it at the bottom will load all your important stuff first and save the flash javascript to load last.

bluish · Accepted Answer · 2013-03-26 15:27:52Z

4

Well, the <script> should be included before </body> and as you say <script src="jQuery.js"></script> has to be included before the <script src="myScriptThatUsesjQuery.js"></script>, because jQuery.js loads all the functions that are used by myScriptThatUsesjQuery.js, so you can't use a function (eg $()) before it has been declared.

edited Mar 26, 2013 at 15:27

bluish

27.5k28 gold badges126 silver badges185 bronze badges

answered Sep 17, 2011 at 4:46

kritya

3,3728 gold badges45 silver badges60 bronze badges

Comments

TemplateRex · Accepted Answer · 2013-03-08 20:46:58Z

1

Having a lot of script files in your head tag slows site performance because the HTTP spec advises browsers not to download more than 2 files from any host in parallel. So if you have a half dozen or so .js files being loaded from your site's script folder, the loading of the other resources on your site (images/css etc) are going to be blocked while the browser goes through the list 2x2. It produces a bottleneck, basically.

I think some modern browsers have workarounds for this problem, but until the world gives up on IE6/7, it is probably better to err on the side of optimisation.

edited Mar 8, 2013 at 20:46

TemplateRex

70.9k21 gold badges176 silver badges316 bronze badges

answered Sep 17, 2011 at 12:03

JHolyhead

9844 silver badges8 bronze badges

Collectives™ on Stack Overflow

HTML script tag placement?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related