A quick recap: the
<script> tag or the script tag can reference an external file. Before we dive deeper, let’s take a moment to talk about how browsers parse HTML files into web pages. This informs where to include a
<script> element inside your HTML file.
Browsers come equipped with HTML parsers that help browsers render the elements accordingly. Elements, including the
<script> element, are by default, parsed in the order they appear in the HTML file. When the HTML parser encounters a
<script> element, it loads the script then executes its contents before parsing the rest of the HTML. The two main points to note here are that:
<script>element, thus leading to a delay in load time and resulting in a poor user experience.
The GIF below displays two scripts being loaded. The first script makes a
Watering Can appear, the second script makes a
Flower appear. This shows how scripts are loaded sequentially, and how they pause the HTML parser, which is why “Blooming” appears at the end.
Oops! In the code editor script2.js depends on a variable in script1.js causing an error (we actually want our text to be blue instead of pink). Switch the order of the scripts so that they load appropriately.