How to use the script tag in Javascript

The script tag

As we all know that the script tag is an HTML element which allows us to enclose the code in a document. It is mostly used to load the JavaScript code and then execute it.

How to use script tag

There are two ways to use the scripts: 1. Inline, which is used inside of the script tag:

<script>
console.log("This is script tag");
<script>
  1. By reference, using the src attribute and then providing the path to the script:
<script src="files/scriptTag.js"></script>

Attributes

The script tag accepts several attributes that let us customize it to our needs. Some of the most commonly used are:

type

The type attribute specifies the MIME type of the script. Normally, it can be omitted in HTML5-compliant (modern) browsers because it defaults to text/javascript.

integrity

This can be used when downloading our script from an external server, to make sure that nobody altered the original script on its way from the provider's server to the user's computer.

For example when loading the jQuery library from www.code.jquery.com , we will set integrity equal to the hash provided by the site. And the script will only execute if the hash of the downloaded file matches the one specified by us.

defer

Scripts with the attribute defer e.g. <script defer src="example.js" ></script> will be downloaded during the parsing of the HTML document, but executed after the whole document was parsed.

async

Scripts with the attribute async will be also be downloaded during the parsing of the HTML document, but will be executed as soon as they have been downloaded.

Comparison between using defer, async and neither of them

If neither async nor defer attribute is specified, the script will be executed as soon as the HTML parser encounters it. This will halt the parsing of the HTML file, until the script is both downloaded (if it's not inline) and executed. And then parsing of the html document will continue. This is useful when we want to execute a script before the page is loaded, for example if we're trying to change the content of the page with javascript.

When we do not rely on a particular script to run other code, then we can use the async attribute. For example when using Google Analytics. Since we don't use the code from the script anywhere else, we can let it be downloaded whenever is optimal for the browser.

When we don't want our script to pause the html parser, then we can use defer. This is used for example for icon libraries like www.fontawesome.com, where the code will be downloaded during HTML parsing, but the icons will be added to the page only after the page has been loaded.

async vs defer vs none (Image source)

In the image above you can see the how the different script download and execution differ . Note that in reality, the green bar in the first instance should stretch longer than it does, this is because the html parsing absolute time is the same across all options.

Note that async and defer only work for scripts referenced with the src attribute. They have no effect on inline scripts.

AUTHOR

READ NEXT

Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?