HTML5 has added two Boolean attributes to

defer

The defer script does not block the downloading and HTML parsing of other scripts, but it waits until the rest of the DOM builds are complete before firing the DOMContentLoaded event. That is, if the defer script downloads quickly, it will take a while (the DOM build is complete) to execute. The defer script is a bit like the one placed at the end of the body, but the download is not blocked by the page.

<! DOCTYPEhtml>
<head>
  <script src="/scripts/defer_script.js" defer></script>
</head>
<body>
  <! -- 10000 entries, slow HTML parsing -->
  {% for item in arr %}
  <p>Number {{ item }}</p>
  {% endfor %}
</body>
Copy the code



whendefer scriptOn the<head>When HTML parsing is slow,defer scriptInstead of executing immediately after downloading, it waits until the last few nodes of the Document are parsed.

The defer script blocks execution of the following defer script, but not the following Async script and normal script.

<! DOCTYPEhtml>
<head>
  <script src="/scripts/defer_script1.js? t=50" defer></script>
  <script src="/scripts/defer_script2.js" defer></script>
</head>
<body>
  {% for item in arr %}
  <p>Number {{ item }}</p>
  {% endfor %}
</body>
Copy the code



defer_script1indefer_script2Before, but the download was slow, eventually stilldefer_script1To perform first.

Defer_script2 defer is deferred first if you remove it or change it to async.

async

Downloading async scripts also does not block downloading of other scripts and HTML parsing, but execution does.

Imagine a scene like this,async scriptDownloading is fast, HTML parsing is mediocre,async scriptExecution time is long. As you can see,async scriptExecution of block HTML parsing.



async scriptThe order of execution is not affected by the precedingdefer scriptorasync scriptAffects, but is blocked by the execution of the previous normal script.

<! DOCTYPEhtml>
<head>
  <script src="/scripts/async_script2.js? t=50" async></script>
  <script src="/scripts/async_script1.js" async></script>
</head>
<body>
</body>
Copy the code



async_script2Position ratio in documentasync_script1Forward, but because the network request will delay about 50ms, the final execution is also more thanasync_script1Late.

conclusion

  1. The same
    1. Is only used for enclosing scripts,<script>Ignore the defer and async properties if there is no SRC property;
    2. Script download is parallel to HTML parsing.
  2. The difference between
    1. defer scriptAfter the HTML parsing is complete, andasync scriptExecution blocks HTML parsing;
    2. multipledefer scriptExecute in the same order as they appear in document,async scriptThe order in which they are executed depends on how quickly they download.
    3. At the same time usedefer,async.asyncHas a higher priority.

Application scenarios

  1. For dependent scripts such as jquery, it is recommended to defer to ensure that jquery is finished before executing the other three scripts.
  2. Async is recommended for relatively independent scripts such as data burying points, but be aware that page performance may be affected if the script downloads quickly.

The resources

  1. Javascript. The info/script – asyn…
  2. www.growingwiththeweb.com/2014/02/asy…
  3. www.digitalocean.com/community/t…