By default, javascript is loaded synchronously, and javascript is blocked during loading. The following elements can be loaded only after javascript is loaded. How can this problem be solved, next, we will introduce three implementation solutions for asynchronous loading of js. If you are interested, refer to the following: by default, javascript is synchronously loaded, that is, javascript is blocked during loading, the subsequent elements can be reloaded only after javascript is loaded. For javascript that is not significant, loading will be slow if it is placed in the page header, it will seriously affect the user experience.
(1) defer, only supports IE
Defer attribute definition and usage (from w3school website)
The defer attribute specifies whether the script execution is delayed until the page is loaded.
Some javascript scripts use the document. write method to create the current document content. Other scripts are not necessarily the same.
If your script does not change the content of the document, you can add the defer attribute to the script tag to speed up document processing. Because the browser knows that it will be able to safely read the rest of the document without executing the script, it will postpone the interpretation of the script until the document has been displayed to the user.
Example:
The Code is as follows: