<script> the location of the label
The HTML4 specification allows <script> to be placed in
However, putting in
Because the script blocks the download of other resources on the page, it is recommended that all <script> be placed at the bottom of the <body> tag.
Non-blocking scripts
Defer
HTML4 introduces the defer attribute to <script>, with this attribute <script> can be placed anywhere, the corresponding JavaScript file starts to download when the page interprets the label, and then after the DOM loading is complete, The Window.onload event executes before and after the <script> of other properties that do not have defer.
The <script> download script with the Defer property does not block other processes that load the page, and such files can be downloaded in parallel with other resources.
When the <script> tag with defer uses SRC to introduce an external script, the script that is embedded in this script is not valid.
According to the HTML5 specification, defer is valid only if SRC is declared.
Examples of Use:
<src= "Hello.js" defer= "defer"></Script > or <src= "Hello.js" defer ></ Script >
Async
Async is a property added by HTML5, similar to defer
Async will only take effect if SRC is declared.
<script> immediately download the script file labeled Async, without blocking other processes that page loads, and the script executes as soon as the download is complete.
<script> marked as async must be executed before window.onload.
Scripts marked as Async are not guaranteed to execute in the order specified, eg:
<async src= "Hello.js"></script>< Async src = "world.js" ></script >
In the above code, the second script may be executed before the first, so it is best not to have dependencies between script files loaded with async.
JavaScript script loading related knowledge