Member-only story
If you’re on a free Medium plan, click here to read — Free Access
For more questions and answers visit our website at Frontend Interview Questions
The Loading Sequence: HTML vs. JavaScript
When a web browser loads a web page, it processes the HTML document from top to bottom. This means that as the browser encounters HTML tags, it renders the content on the page. However, when it comes to JavaScript, the loading and execution behavior can vary based on how the scripts are included in the HTML.
Default Behavior
By default, when you include JavaScript using the <script> tag in the <head> section of your HTML document, the browser pauses the parsing of HTML to download and execute the script. This can lead to a delay in rendering the page, as the browser must finish loading and executing the script before continuing with the HTML.
Example: Default Script Loading
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Loading Example</title>
<script src="script.js"></script> <!-- JavaScript loads before HTML -->
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>