The order scripts really run in
The defer script uses a data: URL so it has a real src without needing a network. Deferred scripts and modules run after parsing, in the order they appear, then DOMContentLoaded fires.
How you link stylesheets, scripts and fonts decides how fast a page appears: defer, async and type="module" change when scripts run, and preload, preconnect and prefetch tell the browser what to fetch early.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A page loads jquery.js, then carousel.js (which uses jQuery), plus an independent chat-widget.js. Write the three script tags so nothing blocks parsing and the order is safe.
Write the head tags to use the Google Font Poppins (weights 400 and 600) as fast as possible.
Explain it without notes
Compare a plain script, async, defer and type="module".
Why are stylesheets render-blocking, and how does media="print" change that?
What is the difference between preload, prefetch and preconnect?
Why do font preloads need crossorigin?
Preview
Console
Nothing logged yet.Expected console output
1. plain script in the head
2. plain script at the end of the body
3. defer script
4. inline module script
5. DOMContentLoaded