This is the fourth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

1. defer

This property means that the script does not change the structure of the page when it is executed. That is, the script is delayed until the entire page is parsed. Therefore, setting the defer attribute on the 

<! DOCTYPEhtml>
<html>
    <head>
        <title>Example HTML Page</title>
        <script defer src="example1.js"></script>
        <script defer src="example2.js"></script>
    </head>
    <body>
        <! -- Here is the page content -->
    </body>
</html>
Copy the code

Although the

The defer attribute applies only to the external script (only if the SRC attribute is used), so the browser ignores the defer attribute for the in-line script.

If there are multiple scripts with the defer property, the deferred scripts may not always be executed in order or before the DOMContentLoaded event, so it’s best to include only one.

Support for the defer property started in Internet Explorer 4, Firefox 3.5, Safari 5, and Chrome 7. All other browsers ignore this property and process the script as usual. With this in mind, it’s better to place scripts that you want to postpone at the bottom of the page.

2. async

The async property is similar to defer in terms of changing the way the script is handled. Of course, both of them work only with external scripts, and both tell the browser to start downloading immediately. However, unlike Defer, the scripts marked async are not guaranteed to be executed in the order they appear.

<! DOCTYPEhtml>
<html>
    <head>
        <title>Example HTML Page</title>
        <script async src="example1.js"></script>
        <script async src="example2.js"></script>
    </head>
    <body>
        <! -- Here is the page content -->
    </body>
</html>
Copy the code

The second script may execute before the first. Therefore, the point is that there is no dependency between them. The purpose of adding the async property to the script is to tell the browser that it doesn’t have to wait for the script to download and execute before loading the page, nor does it have to wait for the asynchronous script to download and execute before loading other scripts. Therefore, scripts marked async are not guaranteed to be executed in the order they appear.

3. The difference between

For the HTML tag .

Simply put, if:

  • neitherdeferThere is noasyncProperty, the browser encounters thescriptLabel when will immediatelyloadingandperformThe specified script. After the execution is complete, the following tags are parsed.
  • There areasync Property that the browser encountersscriptThe label,loadingThe script process occurs simultaneously with the parsing of the following tags. After loading is finished, separateperformThe script.
  • There aredeferProperty that the browser encountersscriptThe label,loadingThe script process occurs simultaneously with the parsing of the following tags. butperformThe script process is executed after all elements have been parsed. It can be interpreted this way:deferItself hasdelayIn the meaning ofloadingAfter the script is finished, theperformprocessPut off till the end.