JS asynchronous Load defer and async comparison

Online saying a lot, very few words can summarize clearly, finally found two sentences sharply description, very in place:

Same point: Dom parsing is not blocked

Defer: Order: Ensure order of precedence. Parsing: When the HTML parser encounters them, it does not block (the script will be downloaded asynchronously), and the script is executed after the document parsing is complete.

Async: Order: No guaranteed sequencing. Parsing: When the HTML parser encounters them, it does not block (the script will be downloaded asynchronously, once the download is complete, execute it immediately), and continue parsing the document.

Summing up: The defer effect is:js after the asynchronous download and after the Dom parsing is complete and the domcontentloaded event triggered by the order of the page script Execute from top to bottom!

Async effect is: Which JS first download first execution, not according to the order of the page script, JS execution must be in the window Load event before the trigger

By the way: the Load event of window is triggered when everything on the page is loaded, but this process can be quite a hassle because of the excessive loading of external resources.

The domcontentloaded event is triggered after the completion of the DOM tree, regardless of whether the image, JavaScript file, CSS file, or other resources have been downloaded.

Personal advice: If there is a dependency on the loaded JS, it is recommended to use defer to ensure security, otherwise use async to

Extensive browser support is available, but query compatibility is required for use!

JS asynchronous Load defer and async comparison