Sample

#### Table of Contents 1. Introduction 2. inline script 3. external script 4. async tag script 5. defer tag script 6. dynamic script with defer 7. inline vs external vs async vs defer 8. 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. ```Javascript ``` ### 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. ```Javascript ``` ### 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. ```Javascript ``` ### 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. ```Defer ``` ### dynamic script Another way to load the script is dynamic load the script and this could be useful depend on the scenarios. ```Javascript ``` ### 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. ```Javascript Sample

Main HTML

``` ![result of different script loading](/images/async-defer-inline-external-script-tag-in-javascript/img1.png) ### 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.

Code Snippet - Sample Code for Beautify Json

More Blogs Like This