📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › HTML Fundamentals › Loading Scripts

Loading Scripts

5 min read Quiz at the end
defer downloads scripts in parallel and runs them after HTML parsing in order. async downloads in parallel and runs immediately. Use defer for most scripts and async only for fully independent scripts like analytics.

Loading JavaScript

<!-- In head — blocks rendering (avoid) -->
<script src="app.js"></script>

<!-- Defer — runs after HTML parsed (recommended) -->
<script src="app.js" defer></script>

<!-- Async — runs as soon as downloaded -->
<script src="analytics.js" async></script>

<!-- Inline script -->
<script>console.log("hello");</script>

Use defer for most scripts. Use async for independent scripts like analytics.

Topic Quiz · 5 questions

Test your understanding before moving on

1. Which script attribute runs after HTML is parsed?
💡 defer makes the script run after HTML parsing is complete, in order.
2. Which script attribute runs as soon as downloaded?
💡 async downloads and runs the script as soon as it is available, without waiting.
3. Where is the best place to put scripts?
💡 Scripts can go in <head defer> or before </body> — both work well.
4. What is the difference between defer and async?
💡 defer: ordered, runs after HTML parse. async: unordered, runs as soon as loaded.
5. Inline scripts should be used for:
💡 Inline scripts are acceptable for small critical snippets; external files are preferred for larger code.