Async Defer Inline or External Script Tag in JavaScript
Table of Contents
- Introduction
- inline script
- external script
- async tag script
- defer tag script
- dynamic script with defer
- inline vs external vs async vs defer
- Conclusion
Introduction
This blog is trying to show different way to load the script to the HTML page.
inline script
Directly add script as inline Javascript, inline script reduce the HTTP requests when using as external script, also inline script parse script and execute immediate by the browser.
There're more scenarios use inline script could lean to lots of issues, in general it'll better to avoid use the inline.
<script>
;(function() {
const x = 100;
})();
</script>
external script
Reference a Javascript file as external script, external script is practical when load huge amount of script file or same script need to load in many pages, there're more benefit such as browser cache or bundle, but in general load lots of javascript file is better to use external file.
Same as inline script, when browser load the external script will parse then execute immediately, which could be a issue if the parse or execution of the external JavaScript cause your page display slow.
<script src="./my-script.js"></script>
async script
async attribute could be one solution to fix the issue external script has, async is a attribute to add to the external script, add async attribute then the script will be executed asynchronously whenever is available.
<script async src="/public/script.js?id=async 2"></script>
defer script
defer is also one solution to fix the external script issue which to avoid execute the script immediately, unlike the async will execute whenever is available, defer will execute before the DOMContentLoaded event.
<script defer src="/public/script.js?id=async 2"></script>
dynamic script
Another way to load the script is dynamic load the script and this could be useful depend on the scenarios.
<script>
console.info('start dynamic script 1')
var tag = document.createElement('script');
tag.src = "/public/script.js?id=dynamic script defer 1";
tag.defer = true;
document.body.appendChild(tag);
</script>
Compare the difference Script
What if we put all these different way of loading the JavaScript and which will be load first and last? So added following different scenario at the HTML.
<html>
<head>
<title>Sample</title>
<script>
;(function(){
console.info('inline 1')
})();
</script>
</head>
<body>
<script defer src="/public/script.js?id=defer 1"></script>
<p>
Main HTML
</p>
<script defer src="/public/script.js?id=defer 2"></script>
<script>
;(function(){
console.info('inline 2')
})();
</script>
<script src="/public/script.js?id=script 1"></script>
<script defer src="/public/script.js?id=defer 3"></script>
<script async src="/public/script.js?id=async 1"></script>
<script>
;(function(){
console.info('inline 3')
})();
</script>
<script>
console.info('start dynamic script 1')
var tag = document.createElement('script');
tag.src = "/public/script.js?id=dynamic script defer 1";
tag.defer = true;
document.body.appendChild(tag);
</script>
<script defer src="/public/script.js?id=defer 4"></script>
<script async src="/public/script.js?id=async 2"></script>
<script async src="/public/script.js?id=async 3"></script>
<script src="/public/script.js?id=script 2"></script>
<script src="/public/script.js?id=script 3"></script>
<script src="/public/script.js?id=script 4"></script>
<script defer src="/public/script.js?id=defer 5"></script>
<script>
console.info('start dynamic script 2')
var tag = document.createElement('script');
tag.src = "/public/script.js?id=dynamic script defer 2";
tag.defer = true;
document.body.appendChild(tag);
</script>
<script>0
;(function(){
console.info('inline 4')
})();
</script>
<script defer src="/public/script.js?id=defer 6"></script>
</body>
</html>
Conclusion
As you can see, the inline script and external script are all load first. async script will load whenever possible, that's why you can see it load between external script and async script, defer will load before the DOMContentLoaded, which all defer script load at the last.