DEV Community

Cover image for Best Way to add Javascript file in HTML
sagar
sagar

Posted on

1

Best Way to add Javascript file in HTML

In HTML, there are several ways to include a JavaScript file. I'll explain four different methods, their drawbacks, and finally, highlight the best approach.

1.<script src="custom.js"></script> in <head>

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js"></script>
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

In this approach while parsing code, javascript file loaded first before html inside body and If the JavaScript tries to manipulate elements in the body that haven’t been parsed yet, it can lead to errors, as the HTML content hasn’t fully loaded.

This blocking behavior delays the parsing and rendering of the rest of the page, affecting performance and user experience.

2.<script src="custom.js"></script> in <body> (at the end)

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>
<body>
    <script src="custom.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

In this approach, the HTML is fully parsed before the JavaScript is loaded and executed, preventing errors related to missing DOM elements. This approach is all good but since HTML parsing and JavaScript loading happen sequentially, it can take longer duration overall, as the two processes occur at different times

3.<script src="custom.js" async></script> in <head>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js" async></script>
</head>
<body>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

In this approach, we make the JavaScript asynchronous, so it doesn’t block the HTML from loading. Both HTML parsing and JavaScript loading happen in parallel. However, if the JavaScript executes before the HTML is fully parsed and js tries to manipulate html elements that haven’t loaded yet, it can cause errors.
Note: — this approach can save the time but by loading html ,js simultaneously but more vulnerable to error

4.<script src="custom.js" defer></script> in <head>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js" defer></script>
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This approach is similar to the third one, where both HTML parsing and JavaScript loading happen in parallel. However, even if the JavaScript loads first, the browser waits until the HTML is fully parsed before executing the script

Summary: Best Approach

The best way is usually to use:

<script src="custom.js" defer></script>
Why:

  • It doesn’t block the HTML parsing (non-blocking download).
  • It ensures the script runs after the DOM is fully parsed, making it safer for manipulating DOM elements.
  • It preserves script execution order if you have multiple deferred scripts.

In cases where the script is independent of DOM content (like tracking scripts or ads), you can use async for better performance.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay