Defer vs Async in JavaScript — The Script Tag Mistake Everyone Makes

• Your page shows a blank white screen on reload?

• Or your app suddenly stops working after you shuffle around script files?

Most of the time, the culprit is how you’re loading your JavaScript files.

---

The Usual Mistake

Many developers just drop scripts like this:

<head>
  <script src="app.js"></script>
</head>

What happens?

• The browser stops parsing HTML until app.js is fully downloaded and executed.

• Result: your page takes longer to show up (a.k.a. render-blocking).

This is why you often see a white screen or a sluggish first load.

---

The Fix: defer

Enter the defer attribute:

<head>
  <script src="app.js" defer></script>
</head>

What happens now:

• HTML keeps parsing while the script is being fetched.

• The script only runs after the DOM is fully parsed.

• No more white screens caused by blocking JavaScript.

That’s why defer is your best friend for loading essential scripts that depend on the DOM.

---

But What About async?

Another option is async:

<head>
  <script src="analytics.js" async></script>
</head>

Key difference:

• async also downloads in parallel, but executes as soon as it’s ready, even if the HTML is still parsing.

• This is great for scripts that don’t depend on the DOM or other scripts (like analytics, ads, or trackers).

---

Quick Comparison

---

TL;DR

• Avoid using plain <script src="..."></script> in <head>.

• Use defer for your main JavaScript.

• Use async for independent scripts.

This simple change leads to faster page loads and fewer white screen issues.

---

If you found this helpful, follow along for more beginner-friendly insights on JavaScript, the MERN stack, and real-world development practices.

---