Where to place JavaScript in an HTML file?

Asked 13/10, 2008 at 4:19 Answered 5/6, 2020 at 10:27

232

Say I have a fairly hefty JavaScript file, packed down to roughly 100kb or so. By file I mean it’s an external file that would be linked in via <script src="...">, not pasted into the HTML itself.

Where’s the best place to put this in the HTML?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

Will there be any functional difference between each of the options?

Patella answered 13/10, 2008 at 4:19 Comment(1)

Possible duplicate of Where should I put <script> tags in HTML markup? – Pointblank 28/8, 2017 at 12:46

183

The Yahoo! Exceptional Performance team recommend placing scripts at the bottom of your page because of the way browsers download components.

Of course Levi's comment "just before you need it and no sooner" is really the correct answer, i.e. "it depends".

Throttle answered 13/10, 2008 at 4:34 Comment(5)

For example, if you're going to be doing a bunch of jQuery stuff, you would need the library loaded before you actually try to make use of it. – Kulseth 8/7, 2009 at 22:9

Also, the reason why Yahoo EPT recommends placing JS at the bottom is because the browser must go into single-threaded mode while the JS loads and then executes. If the script is in the head or in the midst of the content, the browser will "pause" while it deals with the JS. By placing the JS at the bottom, the content will be loaded and generally visible so the user can start reading it while the browser is still dealing with the JS. – Kulseth 8/7, 2009 at 22:12

Hi. Do we put code like this $(function () {...}) as the bottom of the page as well, or does it have to be inside <head> ? – Sleuthhound 6/5, 2013 at 4:25

I hope referring of "bottom of your page" here is not beyond </body>? – Bellied 8/8, 2013 at 6:20

Modern browsers can also read the "defer" attribute. You can set defer="defer" on script tags that aren't at the bottom of the <body>, and when the browser sees those, it will first finish loading the rest of the html and then go back and interpret the contents of the script tag. This is helpful if you're using some sort of framework where you don't have full control of the page. Dig into this article and note that it's a living document so some of the info is outdated: #5250912 – Smiley 22/9, 2016 at 16:15

The best place for it is just before you need it and no sooner.

Also, depending on your users' physical location, using a service like Amazon's S3 service may help users download it from a server physically closer to them than your server.

Is your js script a commonly used lib like jQuery or prototype? If so, there are a number of companies, like Google and Yahoo, that have tools to provide these files for you on a distributed network.

Angio answered 13/10, 2008 at 4:24 Comment(0)

As a rule of thumb, the best place to put <script> tags is the bottom of the page, just before </body> tag. Something like this:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

Why?

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. More...

CSS

A little bit off-topic, but... Put stylesheets at the top.

While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively. More...

With 100k of Javascript, you should never put it inside the file. Use an external script Javascript file. There's no chance in hell you'll only ever use this amount of code in only one HTML page. Likely you're asking where you should load the Javascript file, for this you've received satisfactory answers already.

But I'd like to point out that commonly, modern browsers accept gzipped Javascript files! Just gzip the x.js file to x.js.gz, and point to that in the src attribute. It doesn't work on the local filesystem, you need a webserver for it to work. But the savings in transferred bytes can be enormous.

I've successfully tested it in Firefox 3, MSIE 7, Opera 9, and Google Chrome. It apparently doesn't work this way in Safari 3.

For more info, see this blog post, and another very ancient page that nevertheless is useful because it points out that the webserver can detect whether a browser can accept gzipped Javascript, or not. If your server side can dynamically choose to send the gzipped or the plain text, you can make the page usable in all web browsers.

Keelia answered 13/10, 2008 at 7:36 Comment(3)

You've misunderstood the OP's question. He was asking where in the HTML to put the script tag. He was already using an external file, not inlining the script. Admittedly, this was less clear prior to his edit of the question in April '09. Perhaps delete this answer? – Eraeradiate 23/6, 2013 at 12:18

@Leandro I guess it's because people don't always keep the actual question in mind yet still consider answers such as this one useful. Nonetheless, this answer is useful but not necessarily relevant. It might work better if the vote up tooltip contains more explicit wording, e.g. 'This answer is useful and relevant'. – Vassar 22/11, 2013 at 1:21

On gzipped Javascript: You can just configure your webserver to compress it as well... (Or use something like nginx's gzip_static module/option) (and the gunzip one for other clients) That should at least send the correct content-type header, with encoding marked as gzip, likely resulting in even better browser support – Differentiation 5/2, 2015 at 9:14

Putting the javascript at the top would seem neater, but functionally, its better to go after the HTML. That way, your javascript won't run and try to reference HTML elements before they are loaded. This sort of problem often only becomes apparent when you load the page over an actual internet connection, especially a slow one.

You could also try to dynamically load the javascript by adding a header element from other javascript code, although that only makes sense if you aren't using all of the code all the time.

Auxiliary answered 16/10, 2008 at 14:44 Comment(0)

Using cuzillion you can test the affect on page load of different placement of script tags using different methods: inline, external, "HTML tags", "document.write", "JS DOM element", "iframe", and "XHR eval". See the help for an explanation of the differences. It can also test stylesheets, images and iframes.

Martijn answered 16/10, 2008 at 14:22 Comment(0)

The answer to the question depends. There are 2 scenarios in this situation and you'll need to make a choice based on your appropriate scenario.

Scenario 1 - Critical script / Must needed script

In case the script you are using is important to load the website, it is recommended to be placed at the top of your HTML document i.e, <head>. Some examples include - application code, bootstrap, fonts, etc.

Scenario 2 - Less important / analytics scripts

There are also scripts used which do not affect the website's view. Such scripts are recommended to be loaded after all the important segments are loaded. And the answer to that will be bottom of the document i.e, bottom of your <body> before the closing tag. Some examples include - Google analytics, hotjar, etc.

Bonus - async / defer

You can also tell the browsers that the script loading can be done simultaneously with others and can be loaded based on the browser's choice using a defer / async argument in the script code.

eg. <script async src="script.js"></script>

Designate answered 5/6, 2020 at 10:27 Comment(0)

The answer is depends how you are using the objects of javascript. As already pointed loading the javascript files at footer rather than header certainly improves the performance but care should be taken that the objects which are used are initialized later than they are loaded at footer. One more way is load the 'js' files placed in folder which will be available to all the files.

Wirewove answered 13/10, 2008 at 8:33 Comment(0)

The scripts should be included at the end of the body tag because this way the HTML will be parsed by the browser and displayed before the scripts are loaded.

Gilbreath answered 26/2, 2019 at 20:14 Comment(0)

Like others have said, it should most likely go in an external file. I prefer to include such files at the end of the <head />. This method is more human friendly than machine friendly, but that way I always know where the JS is. It is just not as readable to include script files anywhere else (imho).

I you really need to squeeze out every last ms then you probably should do what Yahoo says.

Lilybel answered 13/10, 2008 at 8:51 Comment(0)

Your javascript links can got either in the head or at the end of the body tag, it is true that performance improves by putting the link at the end of your body tag, but unless performance is an issue, placing them in the head is nicer for people to read and you know where the links are located and can reference them easier.

Mourning answered 18/11, 2015 at 17:12 Comment(0)

I would say that it depends of fact what do you planed to achieve with Javascript code:

if you planned to insert external your JS script(s), then the best place is in head of the page
if you planed to use pages on smartphones, then bottom of page, just before tag.
but, if you planned to make combination HTML and JS (dynamically created and populated HTML table, for example) then you must put it where you need it there.

Austine answered 26/7, 2016 at 11:49 Comment(3)

What I said to deserve minus!? Geez. – Austine 26/7, 2016 at 20:31

What does being external have to do with putting the script in the head? Why is the bottom of the page a good place to put scripts specifically for smart phones? Your statement about dynamically generating HTML from JS is true only if you are using document.write, which you probably shouldn't be. – Datnow 1/8, 2016 at 7:34

You "presumed" what I thought and due that my answer got minus? You think probably that your presumption is better than my explanation, right? I just planned to make short explanation, if someone is unable to understand then he'll ask for more info. In my comment I suggested to put JS into end of page for smarth phones and tablets, just before end of body because loading of whole page is faster as browser doesn't need to switch to "single thread" mode, page content will start appear on screen... but you probably know this. – Austine 1/8, 2016 at 17:38

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Why?

CSS

Further reading

Recommended topics

Hot tags