The main way to insert javascript code into the html page is through the script tag. These include two forms. The first is to directly insert js code between script tags, and the second is to introduce external js files through the src attribute. Since the interpreter blocks rendering of the rest of the page during parsing and executing js code, it will cause long-term blanking and delays for pages with a large amount of js code. In order to avoid this problem, it is recommended to place all js references before the </body> tag.
There are two attributes of script tags, defer and async, so the use of script tags is divided into three situations:
1.<script src="example.js"></script>
Without the defer or async attribute, the browser will immediately load and execute the corresponding script. That is to say, before rendering the document after the script tag, you do not wait for the subsequent loading of the document elements, and start loading and execution after reading it. This will block the loading of the subsequent document;
2.<script async src="example.js"></script>
With the async attribute, it means that the loading and rendering of subsequent documents are carried out in parallel with the loading and execution of js scripts, that is, asynchronous execution;
3.<script defer src="example.js"></script>
With the defer attribute, the process of loading subsequent documents and the loading of the js script (only loading but not executing at this time) are carried out in parallel (asynchronously). The execution of the js script needs to wait until all elements of the document are parsed and before the DOMContentLoaded event triggers execution.
The following figure can intuitively see the difference between the three:
Among them, blue represents the loading time of the js script network, red represents the execution time of the js script, and green represents the resolution of the html.
From the figure we can clarify the following points:
1. Defer and async are consistent in the network loading process and are both executed asynchronously;
2. The difference between the two is when the script is executed after it is loaded. It can be seen that defer is more in line with the requirements of most scenarios for application script loading and execution;
3. If there are multiple scripts with defer attributes, they execute the script in the load order; for async, its loading and execution are closely linked. Regardless of the declaration order, it will be executed immediately as long as the load is completed. It is of little use to application scripts because it does not consider dependencies at all.
summary:
The common point between defer and async is that they can load JS files in parallel and will not block the loading of the page. The difference is that after defer is loaded, JS will wait for the entire page to be loaded before executing. Async will execute JS immediately after loading. Therefore, if there is a strict order of execution of JS, it is recommended to use defer to load.
The above is a detailed explanation of the difference between defer and async attributes in JS introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!