Placing Javascript in a HTML file

Question

Possible Duplicate:
How bad is it to embed JavaScript into the body of HTML?

Ok, so I've been using JavaScript for a good while now and I'm no stranger to it, but my question is in regards to where the JavaScript should actually be placed in a HTML file.

I've always been told and worked under the impression that all of your references to external script files should be contained in the head tag and any script that is contained in the current HTML file should be at the end of the file.

Now, more recently and having discussions with co-workers I have seen more and more people placing script blocks in seemingly random places throughout the HTML page, such as

<div>
   <p>Foo</p>
   <script type="text/javascript">
       //some script
   </script>
   <p>Bar</p>
</div>

Now is this good practice? I've always thought that it wasn't. If so, is it beneficial because the script gets executed at that point, but then why can't you wait until the rest of the HTML has been loaded?

They always told me to put any javascript at the bottom of the page. Doesn't matter if it are external files. The advantage of this is that the javascript executes when the page is loaded. — Anonymous, May 15 '12 at 20:13

score 7 · Accepted Answer · answered May 15 '12 at 20:22

7

+1 vote for at the bottom of the page

give visitors the;

content and markup first
then display with css
then ui with javascript

appreciate this is a tad high brow

answered May 15 '12 at 20:22

Rob Sedgwick

5,026
3
17
35

rabbidrabbit · Answer 2 · 2012-05-15T21:51:02.437

5

Scripts should be placed at the bottom of the page, as that will allow all of the sites resources, such as images, to download in parallel. Once finished the scripts will then be downloaded, one at a time.

The reason it's better to place scripts at the bottom of the page, is because they block parallel downloads. Normally the browser downloads resources such as images in parallel, two resources at a time (as specified by the HTTP 1.1 specification), per hostname. Scripts stop this from happening and will not allow anything else to download until after they have been fully downloaded.

edited May 15 '12 at 21:51

answered May 15 '12 at 20:11

rabbidrabbit

410
5
13

It **DOES** matter. Scripts block parallel downloads. – Samy Dindane May 15 '12 at 20:57
@SamyDindane Isn't that why it's best to place scripts at the bottom of the page? – rabbidrabbit May 15 '12 at 21:27
Yes. Thus, the position *does* matter. :) – Samy Dindane May 15 '12 at 21:45
@SamyDindane True, i'll correct my answer. – rabbidrabbit May 15 '12 at 21:46

score 3 · Answer 3 · edited May 23 '17 at 12:02

3

Duplicate of this Question Is it bad practice to embed JavaScript into the body of HTML?

It is helpful (and perfectly valid) sometimes when you want to ensure that certain dom is created before the script is run.

edited May 23 '17 at 12:02

Community

1
1

answered May 15 '12 at 20:13

Braden

1,438
2
12
18

score 2 · Answer 4 · answered May 15 '12 at 20:24

When I use inline, It has an obvious benefit, for me. for example.

(I will try to explain it with basic scenario. so don't be critical about the scenario)

I have A,B and C html sections (divs) in my page. obviously I will render them all, but I want only one section visible at a time to a visitor. so I can't wait for the whole page and javascript files to be loaded and then apply the "set visibility priority for section" javascript method to fire. because in the meanwhile all three sections (A,B and C) will remain visible until everything is not fully loaded. and the page might look awful so I prefer to use inline javascript.

score 2 · Answer 5 · answered May 15 '12 at 21:47

Started to write a comment underneath Rob Sedge's reply, but it grew larger...

1) CSS at top, in the header (unless you want the user to see page without styling, for large HTML files / external JS, where loading times can be extensive)

2) Content and markup in the body

3) JS in the footer, before </body>

Even though currently JS evaluation is strongly suggested to occur within $(document).ready, or $(window).load events, some external scripts might not do that - in such case they will be evaluated as soon as the content has been downloaded, often causing a random behavior. Furthermore , content is evaluated as soon as browser actually processes given tag (point 1), thus additional fun stuff.

An additional (and at least for me main) point is this - let's say that you've got a templating engine, or PHP inclusion in your documents. Now - let's say that you've got a lot of such files, and in one of them JS code needs to be changed. In such cases, if you're not the only person working on a project, you'd need to search for given bit of code in all of those files. Thus - keeping JS in one place is good practice.

Let's add to that, that if you indeed keep your JS code in one place, then such content can be minified or cached, allowing for faster loading of the site overall. Why indeed you'd want the user to download your bit of JS every time the page is loaded, when that script can be evaluated from the cache. If you separate your scripts, such approach becomes hard.

score 1 · Answer 6 · answered May 15 '12 at 20:41

Basically, the scripts that you put on the header, are downloaded synchronously, and you can be sure that they ar going to be executed in order, but if don't need those scripts to be executed before the page finishes loading, maybe you prefeer to include them at the bottom, or in a deferred way, to finish render the page more quickly, and give the users a better experience.

About the scripts contained in the HTML, it depends on what they do. For example, if for some reason you need to do a Document.write, or you want to execute some code before the page is rendered, to modify the DOM, they are very handy.

I strongly recomend you to read the two books of Steve Souders: "High Performance Web Sites" and "Even Faster Web Sites", there you have a very good explanation on the differences.

Placing Javascript in a HTML file

6 Answers6