𝐇𝐨𝐰 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐢𝐬 𝐥𝐨𝐚𝐝𝐞𝐝 𝐢𝐧 𝐇𝐓𝐌𝐋 𝐜𝐚𝐧 𝐚𝐟𝐟𝐞𝐜𝐭 𝐩𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞, 𝐫𝐞𝐥𝐢𝐚𝐛𝐢𝐥𝐢𝐭𝐲, 𝐚𝐧𝐝 𝐞𝐯𝐞𝐧 𝐰𝐡𝐞𝐭𝐡𝐞𝐫 𝐨𝐮𝐫 𝐜𝐨𝐝𝐞 𝐰𝐨𝐫𝐤𝐬 𝐚𝐭 𝐚𝐥𝐥.
This is something I properly understood recently, and it made me realize that script loading isn’t just a small detail we can ignore.
Before now, based on how I was initially taught, I used to place script tags at the bottom of my HTML file just before the closing body tag so the HTML would load first before JavaScript runs. While that approach works, I recently learned that there are actually structured and more optimized ways browsers handle script loading.
There are three different ways to add JavaScript to an HTML page,
• The regular method
• The async method
• The defer method
and each one behaves differently in the browser.
The regular script method pauses HTML parsing to download and execute JavaScript, which can slow down rendering and sometimes lead to issues when the DOM isn’t ready.
Using async allows JavaScript to download while HTML continues parsing, but it runs as soon as it’s ready, making execution order unpredictable and unsuitable for scripts that depend on the DOM.
The defer method stood out as the most recommended option because it downloads scripts alongside HTML, waits until the DOM is fully parsed, and executes scripts in order, making it both performant and reliable for most applications.
This is another reminder that writing good JavaScript isn’t only about syntax, but also about when and how the browser runs it.
#JavaScript #WebDevelopment #Frontend #LearningInPublic #TechJourney #Growth
https://durgaprasad4289.github.io/Live-Code-Editor/