Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Peter Smith
Peter Smith
12,347 Points

Which is better, external javascript or inline javascript at end of <body>?

When writing javaScript (or jQuery) I have been including all of my code in <script> tags at the end of <body> inline and in some of the treehouse courses, I have seen that style of coding. I have also seen external javascript loaded at the end of <body> to achieve the same effect. Which is the better style? Are there certain circumstances to use one vs the other? (And if you're reading this Andrew Chalkley, if I may speak for myself ...on behalf of everyone... please chime in.)

3 Answers

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

I'm no professional web developer by any measure, but for my various personal side projects, I prefer to stick the code as a link to an external javascript file right before the closing </body> tag. Not only does this keep my code cleaner and let me work on the two files separately, it's also easier to minify the .js file if it's separated. :)

Peter Smith
Peter Smith
12,347 Points

Ryan Field okay. I think you just raised another question for me too... do you use a program to minify your js? If so, what?

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Yep, I use Google's Closure Compiler, which can be found here. You can always download the source code and compile it yourself on your own machine, but since my projects are just simple hobby projects, I just use this online tool.

Marcus Parsons
Marcus Parsons
15,719 Points

You can use http://www.jscompress.com to minify your JavaScript. It does an excellent job.

Also, another reason to use external files instead of inline scripts is that the code can be used by multiple pages from one source, instead of being copied into multiple places. Imagine, you have hundreds of pages in your site, and you were putting code in between <script> tags the entire time. That would be a pain in the butt! lol

Peter Smith
Peter Smith
12,347 Points

Marcus Parsons good point regarding code reuse! That is incredibly astute!

Marcus Parsons
Marcus Parsons
15,719 Points

Thank you! I would say go by this little saying that I literally just made up: "When in doubt, keep the JS out!" (outside of the page that is lol!)

Merritt Lawrenson
Merritt Lawrenson
13,477 Points
Merritt Lawrenson
Merritt Lawrenson
13,477 Points

Personally, I load in my javascript externally in the head next to my CSS. This keeps it modular, so I can reuse js code like I use one stylesheet for multiple pages.

<head>
  <meta charset="utf-8">
  <title>Weather Searcher</title>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="js/app.js"></script>
</head>

Now you have to be careful, because the javascript will run before the page has finished loading. All you have to do to keep that from happening is enclose all your js as a function to run when the document is ready and loaded. Here's what I use:

$(document).ready(function() {
// javascript here
});

You can insert the script tag at the end of the body, and then you won't need the $(document).ready function. Personally, I think it's cleaner to link to all my external resources right in the head, but it's personal preference.

Peter Smith
Peter Smith
12,347 Points

Currently, unnecessarily and foolishly I add a document dot ready function AND use inline javascript at the end of the <body>

Though when writing the js for upcoming projects I'll likely switch to external js files at the end of the document with no document dot ready. I can't say it's better than including the script in the header, and maybe it isn't but that's how I feel.

Marcus Parsons
Marcus Parsons
15,719 Points

It is truly a matter of personal preference whether you choose to load resources in the header of the document or to load them at the very end because either way the script(s) won't run until the document has loaded.

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

It all depends :)

For example view source on Google.com - what do they do? They keep everything inline in the head and the body. They even include CSS inline too!!?!?!?!? Aren't they supposed to be the best? Well the JavaScript they include isn't general JavaScript that is used on every page of their site, it's just for the home page. They are performance maniacs. They want everything to load in that single HTTP request to http://google.com/ - none of this extra HTTP requests taking 10ms for them to serve additional JS files.

If it's a single page site, why do an additional external HTTP request? Is the JavaScript you're using a couple of lines? Don't do an external request.

How big is your JavaScript? Over a 50 kb gzipped? You probably want to have that in an external JavaScript file...

Is functionality shared across your pages then an external file is probably appropriate.

Now, should you smush all your JavaScript in to one file? Maybe...if your web server is HTTP 1.1, and you can pre-cache some of the functionality on pages that haven't been loaded yet, but it's at a bandwidth cost and keeps your server busier serving extra potentially unused code. If you're using HTTP 2 you can have as many externally linked files as you want, it only uses one request! In fact many HTTP 1 best practices will make HTTP 2 slower! Here's a small article covering some of the techniques that'll change.

The answer is complicated and circumstances may vary.

However, I'm still of the school and mindset of that JavaScript (in the client side) should be used to progressively enhance the experience, and I generally include it at the end of the page since content (the HTML, images and a lesser extent the CSS) is king :)

Hope that helps!