Analysis of JavaScript script loading and execution in browser environment: defer and async features _ javascript skills

The defer and async features are believed to be familiar to many JavaScript Developers & quot; but not familiar with & quot;. Literally, the two features are well understood; the functions of latency scripts & quot; and & quot; asynchronous scripts & quot; defer and async are two features that many JavaScript developers are "familiar with but not familiar with". Literally, the two functions are well understood. They are the functions of "latency script" and "Asynchronous script. However, taking defer as an example, developers may not be familiar with some details. For example, when will the execution of scripts with the defer feature be delayed; can both internal scripts and external scripts support defer? In addition to delayed execution of defer scripts, what are the special features. This article combines some existing articles and the two features described in the MDN document to conduct more comprehensive research and summary on defer and async, hoping to help developers better master these two features.

1 Introduction

As mentioned in the code execution sequence for loading and executing JavaScript scripts in a browser environment, JavaScript code execution blocks page parsing rendering and download of other resources, of course, because JavaScript is a single-threaded language, it means that under normal circumstances, JavaScript code on a page can only be executed from top to bottom in order. Of course, as we analyzed in the code execution sequence of loading and executing JavaScript scripts in the browser environment, in some cases, such as using document. when writing a script or introducing a script using dynamic scripting technology, the execution sequence of JavaScript code is not necessarily in the top-down order, defer and async are what we call "abnormal situations ".

We often say that JavaScript Execution is obstructive. In actual development, we usually focus on blocking and the blocking that most affects user experience should be in the following aspects:

[1] Page parsing and rendering Blocking

[2] The page initialization script we wrote (usually the script that listens to the DOMContentLoaded event, which is the first script we want to execute, because we will write the code most relevant to user interaction here)

[3] blocking of external page resource download (Aspect Ratio)

If we have a time-consuming script operation that blocks the three places we mentioned above, the performance or user experience of this webpage will be very poor.

The original intention of defer and async is to solve or mitigate the impact of blocking on the page experience. Next we will analyze these two features, we mainly learn about these two features from the following aspects:

[1] When is the execution time of delayed or asynchronous scripts? What is page blocking?

[2] can both internal scripts and external scripts implement latency or Asynchronization?

[3] How does the browser support these two features? Are there any related bugs?

[4] What else do I need to pay attention to when using scripts that use these two features?

2. defer features

2.1 defer script execution time

The defer feature is an extended feature defined in the HTML4 specification. It was initially only supported by IE4 + and firefox3.5 +, and then added support for chrome and other browsers, the method used is defer = "defer ". Defer indicates the delay, that is, the execution of the script will be delayed. Under normal circumstances, the introduced script will be immediately downloaded and executed. With the defer feature, the script will not be executed immediately after the download is complete, but will be executed after the page resolution is complete. Let's take a look at the description of defer in HTML4:

Defer: When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g ., no "document. write "in javascript) and thus, the user agent can continue parsing and rendering.

That is to say, if defer is set, the user agent is notified that this script will not generate any document content, so that the user agent can continue parsing and rendering. Let's take a look at the key description of defer in MDN:

Defer: If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing.

Through the definition in the standard, we can make it clear that the defer script will not block page parsing, but will be executed after page Parsing is complete, however, a time-consuming defer may still block the download of external resources. Will it block the DOMContentLoaded event? In fact, the defer script is still executed before the DOMContentLoaded event, so it will still block the script in DOMContentLoaded. We can help to understand the execution time of the defer script:

According to the definition in the standard, internal scripts do not support defer, while IE9 and earlier browsers provide defer support for internal scripts.

2.2 defer browser support

Let's take a look at the browser support of the defer feature:

There is a bug in IE9 and below browsers. This bug will be detailed in the DEMO later.

2.3 DEMO: defer feature function verification

We use Olivier Rochard in the script defer attribute to verify the features of the defer feature:

First, we have prepared six external scripts:

1. js:

Test + = "I Am a head external script \ n ";

2. js

Test + = "I Am a body external script \ n ";

3. js

Test + = "I am the bottom external script \ n ";

Defer1.js

Test + = "I'm head external latency script \ n ";

Defer2.js

Test + = "I am the body external delay script \ n ";

Defer3.js

Test + = "I am the bottom external latency script \ n ";

The code in HTML is:

 Defer attribute test