The Script TAG
The script element can be alone, or it can contain some attributes. Nothing is mandatory, some are assumed by the browser when omitted and others require some explanation before use.
Indicates the location of your script, this can be local (on your own server), or global (https://code.jquery.com/jquery-3.1.0.js)
Async or DEFER
Both are optional, and mutually exclusive. Meaning, you don’t have to use them, but if you do, you can only use one, not both.
The normal behavior when loading a HTML page is that when you encounter a script tag, you load the script, and then continue with the rest. The result is unwanted because your page appears to freeze until everything is loaded. Async and defer are both solutions to this problem.
If you want to load the page before your scripts execute, you can put your script tags at the bottom of the <body> tag. Async, enables you to start loading your scripts at the start of the page, but it puts them on another thread and thus allows the rest of your page to keep loading. Defer says that the script tag can only load when all the document’s content is parsed and displayed.
You don’t know when a script will finish loading when you use async. So only use async on indepent scripts. For example: If a script depends on another script to run before it can run itself, then it is vital that it does so. Async has a tendency of screwing up these scenarios.
Defer scripts load in order, hopefully, but this is not always the case, so use only one defer if possible. If you put your script at the bottom of the body tag, then you’re triggering the same behavior as the body tag.
This attribute is a new one, and not totally compatible with all the major browsers yet. Use it when you need scripts from a third source (cdn’s). You get scripts from a third party for speed and bandwidth benefits, but what if an attacker takes over the third party and inserts some malicious code into the extarnal script?
The integrety tag will ensure that the file you recieve is the one you want. If it doesn’t match, then the browser will return a network error.
<script src=”https://code.jquery.com/jquery-3.1.0.js” integrity=”sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=” crossorigin=”anonymous”></script>
Another new one. If you need credentials for an external script, then you need the crossorigin attribute. It defaults to ‘anonymous’ and this is the normal behavior. Set it to ‘use-credentials’ when credentials are needed.
Avoid this attribute, it’s deprecated and ignored by all browsers. Older browsers used the language attribute until the type attribute replaced it. The current browsers ignore this attribute, if you’re lucky.
Don’t use it. period.