Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What is a JS deferred Asynchronous script

2025-01-17 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is JS delayed asynchronous script". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is JS delayed asynchronous script".

What is a deferred script?

The script tag, with async and defer attributes, and so on, is created by document.createElement ('script') and does not specify script.async=false. The script defaults to asynchronous deferred scripts (which must be non-inline scripts), as follows:

Document

Of the above 7 script files, common begins with a non-asynchronous deferred script, and the rest specify the mode of deferred script, which is divided into async and defer

Label insertion created by document.createElement defaults to async mode to start the experiment

I wrote a total of 2 async and 2 defer tags, the rest are ordinary tags. There are 4000 lines of code in async1.js, and the rest is just a console.log.

The results of the first experiment:

Refresh the page again (notice that I have disabled browser caching), and the result is:

Refresh again and find that the timing and sequence of async execution are uncertain.

The reason is that async tells the browser that you don't have to wait until it has finished downloading and parsing before loading the page, nor do you have to wait for it to execute other scripts. It is commonly known as asynchronous execution script to see the comparison between the download execution time and the print result.

Print the results:

Corresponding download execution time

From the above, the download timing async and normal mode are the same parallel download, only defer is the last download (http1.1 has a concurrency limit, but here is not a concurrency limit, when I delete the reference to common, I found that defer is always the last download)

Async and defer are two modes. The difference lies in:

Async tells the browser that it will not operate dom, so it does not have to wait until it has finished downloading and parsing before loading the page, nor does it have to wait for it to execute other scripts. Commonly known as asynchronous script execution, multiple async cannot guarantee their execution order, for example, async1 and async2 cannot be executed sequentially.

Defer is executed only after parsing to the tag. It is commonly known as postponing script execution. Multiple defer can be executed sequentially. For example, defer1 and defer2 can be executed sequentially (in fact, sequential execution is not guaranteed).

After parsing to the script tag, async is downloaded directly

After parsing to the script tag, defer is the last download

Similarities:

Multiple async or defer tags do not actually guarantee sequential execution

Will not block parsing and page rendering of other script tag content

They all execute before the browser load event, but there is no guarantee that it will be executed before or after the DomContentLoad event

Defer is not necessarily executed after async, judging from the results of my experiments and the parsing of them in books.

Factors that affect the execution order of multiple asynchronous scripts

Script file size

Network transmission factor

Special circumstances

When all the script files are very small, the result will be stable in a high probability

Pay attention to the use

The execution order of asynchronously deferred scripts is unstable, and there is only one as far as possible.

When using an asynchronous deferred script, you should consider what scenarios to use instead of abusing it

Thank you for reading, the above is the content of "what is JS delayed asynchronous script". After the study of this article, I believe you have a deeper understanding of what is JS delayed asynchronous script, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report