Where to place JavaScript in an HTML file?

javascript html optimization
nickf picture nickf · Oct 13, 2008 · Viewed 128.6k times · Source

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?

Answer

Walter Rumsby picture Walter Rumsby · Oct 13, 2008

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

Related questions

Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More
Does the <script> tag position in HTML affects performance of the webpage?

If the script tag is above or below the body in a HTML page, does it matter for the performance of a website? And what if used in between like this: <body> ..blah..blah.. <script language="JavaScript" …

Read More
javascript document.createElement or HTML tags

I am confused on following style of writing code. I want to know which is the practical and efficient method to insert HTML tag in document. Javascript: document.getElementById('demoId').innerHTML='<div>hello world and <a&…

Read More