Look at this code:
<body> <script src="deffer.js"></script> content </body>
deffer.js is:
alert(1)
In this way, the page will be blank until the alert window is closed. Because the alert window prevents the page from continuing to render.
In order to avoid such problems, the deffer and async attributes are defined in the HTML specification. The specific definitions of these two attributes will not be discussed here. Anyway, they are used to tell the browser that this page must be executed after the page rendering is completed. The content of the script, so that the page has been rendered when the script is executed.
<body> <script deffer async src="deffer.js"></script> content </body>
Note that for multiple scripts with deffer or async added, their execution order has nothing to do with the order in which they appear on the page. Even though the HTML specification defines that deffer scripts should be executed in order, browsers do not actually follow this convention.