Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Location of Javascript on HTML page

Posted on 2016-11-01
3
Medium Priority
?
65 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 2000 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 43

Expert Comment

by:Rob
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 60

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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

879 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