Member Avatar for PatrixCR

Hi all. I'm new to Javascript, and I want to ask about the best placement of the script tag.
For example, I have an external Javascript called , which assign event listener with addEventListener function. The question is, where should I put this <script type="text/javascript" src = "test.js" /> ?
I saw the example on Yahoo, and they say the best place to put it is in the end of the body tag:

<body>
....
....
<script type="text/javascript" src = "test.js" />
</body>

But on Google Code University video, they give an example, that the best way to put it is in the head, then call one of the function on that script:

<head>
<script type="text/javascript" src = "test.js" />
</head>
<body>
...
init();
</body>

They say the init() function contains code for attaching event listeners to HTML elements, because, if I only put it in the head, the event listeners won't be attached, because the browser haven't parse the HTML elements yet.
But I've recently found an example, that I can still put the script tag in the head tag, without calling the init function in the body tag. Instead, I could write window.onload = init; on my javascript file.
Can you suggest what's the best way to do this, and why? Or if you have a better technique, could you please explain that to me?

Edited by PatrixCR because: n/a
  • 2 Contributors
  • 1 Reply
  • 254 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by MartinRinehart

Dani AI

Generated

Short answer: both patterns you saw work, but aim for predictable timing and good performance. Putting a script at the end of the body is simple and historically recommended (as noted). A cleaner, more modern approach is to keep scripts in the head while ensuring they run after the DOM is ready — that keeps markup and behavior separate and lets the browser download scripts earlier without blocking rendering.

A robust pattern for attaching listeners whether the script runs early or late is to check DOM readiness and only bind when safe. For example:

function setupListeners() {
  // attach handlers here with addEventListener
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', setupListeners);
} else {
  setupListeners();
}

That works reliably whether your file is loaded in the head or at the end of the body.

Practical notes and troubleshooting

  • Use the defer attribute (or ES module scripts, type="module") for external files you want in the head: they download in parallel and execute after parsing; async is only for independent scripts (analytics, ads) because it doesn't preserve execution order.
  • If element lookups return null, the problem is timing (script ran too early) or a selector typo — check the console and the DOM in DevTools.
  • Prefer event delegation when many similar elements need handlers; it reduces per-element binding and is less sensitive to when elements are created.

Either end-of-body or head+deferred/DOM-ready initialization is fine — pick the one that keeps your code organized and tests reliably across the browsers you support.

Member Avatar for MartinRinehart

Steve Souders excellent book "High Performance Web Sites" recommends the end of the body. Prior to reading Souders, everyone used the <head> section.

If you have a single

document.getElementById()

in the code, you don't know if you will get your element or a null, unless your JavaScript is the last thing to load.

If you like irony, Sounders has moved from Yahoo to Google.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.