Solved

Location of Javascript on HTML page

Posted on 2016-11-01
3
26 Views
Last Modified: 2016-11-02
I have been doing websites for over 20 years. Traditionally, I always thought that the Javascript had to be in the document <head> section.

I gather now it can be anywhere, paired by <script>......</script>

Is that true?
0
Comment
Question by:Richard Korts
3 Comments
 
LVL 35

Accepted Solution

by:
Terry Woods earned 500 total points
ID: 41869382
Yes, though it's good practice to add "async" or "defer" for scripts that can load asynchronously or be deferred until after page load, to speed load time.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 41869464
(No points, just wanted to clarify) Yes it can be anywhere. The key point too is that putting it in the head means the browser will typically load the script and run it before your page has loaded. This can not only cause errors but also increase the time it takes for your page to load.
It's become accepted practice to put scripts at the bottom of the page, just before the body end tag. That way the browser does not "see" that script until your page (the DOM) is loaded
1
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41869777
Addendum to Rob and Terry's post.

There can be an order requirement in how you place scripts.

For example
<script>
$(function() {
  $('.someclass').click();
});
</script>
<script src="http://code.jquery.com/jquery.js"></script>

Open in new window

Will generate an error because $(function) uses jQuery which the browser does not know about yet.

If you are emitting jQuery or JavaScript with a library dependency and you put your scripts before </body> you could run into this problem. The solution is to place in the head or to cache your script output and emit it all at the end.

Having said that random script output in my view is bad design so a well designed page should not run into these problems.

If you are really interested in performance you would pack your JS and CSS files into single files for final deployment of your site so there is only one file which you could then include.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now