Look at this code:
<body> <script src="deffer.js"></script> content </body>
The content of 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 html specification defines the deffer and async attributes. The specific definitions of these two attributes are not discussed here. Anyway, they are used to tell the browser that the content of the script must be executed after the page rendering is completed, 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 they appear on the page. Even though the html specification defines that the deffer script should be executed in order, the browser actually does not fully comply with this convention.