Thoughts on delayed scripting

  • The scripts for the Async and defer properties, I’m sure you’ve all heard of them, but what are the actual execution details? There are very few articles that look at it, and there may not be much attention to detail, but in really technical jobs and projects, where the performance requirements are very high, the details are important. You need to experiment and experiment

  • In recent months, I have been studying some technologies, such as Linux, operating system, algorithm and so on, and I expect to continue learning until the end of this year. After the fourth edition of the Little Red Book came out, I also spent a lot of time to read it. For delayed scripting, I also did an experiment and wrote this summary

What is delayed scripting?

  • scriptThe label,asyncanddeferAttributes, etc., passdocument.createElement('script')Created and not specifiedscript.async=falseThe default script isAsynchronous deferredThe script (which must be non-inline) looks like this:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Document</title> </head> <body> </body> <script SRC ="./async1.js" async></script> <script src="./async2.js" async></script> <script src="./defer1.js" defer></script> <script src="./defer2.js" defer></script> <script src="./common1.js"></script> <script src="./common2.js"></script> <script src="./common3.js"></script> </html>Copy the code
  • Above 7 script files, whichcommonThe beginning is non-asynchronous delay script, and the rest specify the mode of delay script, divided intoasyncanddeferTwo kinds of

Label inserts created with Document.createElement default to Async mode

Start the experiment

  • I have written a total of 2 async and 2 defer labels, and the rest are ordinary labels. There are 4000 lines of async1.js, and the rest is just a console.log

  • Results of the first experiment:

  • Refreshing the page again (note that I have disabled browser caching) results in:

  • Refresh again and findasyncThe timing and order of execution is uncertain, but determinabledeferMust be inasyncThen execute.

The reason for this is that async tells the browser that it doesn’t have to wait for the page to load after it has downloaded and parsed, and it doesn’t have to wait for it to execute other scripts

See how the download execution time compares with the print results

  • Print result:

  • Download execution time

  • Viewed from above, download timingasyncIt was downloaded in parallel with the normal mode, and only defer was downloaded last (Http1.1 has a concurrency limitBut this is not the concurrency limit when I deletecommonAfter the quote, I founddeferAlways the last to download)

  • asyncanddeferThe difference between the two modes is:
    • asyncIs to tell the browser that it won’t do anythingdomYou don’t have to wait for it to download and parse before loading the page, and you don’t have to wait for it to execute before executing other scriptsExecute scripts asynchronouslyMore than,asyncThere is no guarantee of their execution order, for exampleasync1andasync2Cannot execute sequentially
    • deferIs in parsing to end to</html>Tags will be executed after, commonly known asDeferring script executionMore than,deferIt can be executed sequentially, for exampledefer1anddefer2Can be executed sequentially (actually not guaranteed)
    • Resolve toscriptAfter the tag,asyncIt’s a direct download
    • Resolve toscriptAfter the tag,deferIs the last download
  • Similarities:
    • multipleasyncordeferTags don’t actually guarantee sequential execution
    • Will not block parsing otherscriptTag content parsing and page rendering
    • They’re all in the browserloadExecuted before the event, but not guaranteed beforeDomContentLoadBefore or after the event
    • deferNot necessarily inasyncAnd then I’m going to do it, and I’m going to do it from my experiment and my book

Factors that affect the execution order of multiple asynchronous scripts

  • Script file size
  • Network transport factor

A special case

  • When all script files are very, very small, the result will most likely be stable

Use the attention point

  • Asynchronous postponement scripts are executed in an unstable order, so try to have only one
  • When using asynchronous postponement scripts, what scenarios should be considered for use, rather than abuse

Write in the last

  • If you have a question or a better answer, you can contribute to the discussion below. I always believe that controversy and dissenting voices are good
  • In addition, if you think the writing is good for you, you can help to clickWatching/liking/following.
  • Focus onThe front-end peakReply after public account:Add group, you can add the group to obtain3800GFree front-end learning video resources