Javascript execution sequence

JavaScript is a descriptive scripting language, which is different from compiling languages such as java or C #. It does not need to be compiled into an intermediate language, but is dynamically parsed and executed by the browser.

If you cannot understand the operating mechanism of the javaScript language, or simply put, you cannot grasp the execution sequence of javascript, it is like bole cannot control the horse, let the horse go, go around.

 

So how does JavaScript parse it? What is the execution sequence? Before learning about this, let's first understand several important terms:

 

1. Code Block

A code block in JavaScript is a code segment separated by a <script> tag. For example:

 

The Code is as follows:

<Script type = "text/javascript">

Alert ("this is code block 1 ");

</Script>

<Script type = "text/javascript">

Alert ("this is code block 2 ");

</Script>

 

JS is compiled and executed according to the code block. The code blocks are independent of each other, but the variables and methods are shared. What does it mean? For example, you will understand:

 

The Code is as follows:

<Script type = "text/javascript">

Alert (str); // because no str is defined, an error occurs in the browser and the following cannot be run.

Alert ("I Am code block 1"); // It is not running here

Var test = "I Am a code block variable ";

</Script>

<Script type = "text/javascript">

Alert ("I Am code block 2"); // here there is a run

Alert (test); // the pop-up "I Am a variable in the code block"

</Script>

In the code block above, code block 1 reports an error, but does not affect the execution of code block 2. This is the independence between code blocks, and variable in code block 2 can be called, it is shared between blocks.

 

2. declarative and assignment functions

 

 

Function definitions in JavaScript are divided into declarative functions and value-assigned functions.

 

The Code is as follows:

<Script type = "text/javascript">

Function Fn () {// declarative function

 

}

 

Var Fn = function {// value-assigned function

 

}

</Script>

The difference between a declarative function and a value-assigned function is that during the JS pre-compilation period, the declarative function will be extracted first before js code is executed in order.

 

3. Pre-compilation and execution

 

 

In fact, the parsing process of JS is divided into two phases: Pre-compilation (preprocessing) and execution.

 

During the pre-compilation period, JS processes all declared variables and functions in the code block (similar to C language compilation). However, note that only declarative functions are processed, besides, variables are declared but not initialized and assigned values.

 

The Code is as follows:

<Script type = "text/javascript">

Fn (); // execution result: "function 2 is executed". The latter of the same name will overwrite the former.

Function Fn () {// function 1

Alert ("executed function 1 ");

}

 

Function Fn () {// function 2

Alert ("executed function 2 ");

}

</Script>

<Script type = "text/javascript">

Fn (); // execution result: "The declarative function is executed", the function is declared and processed during the pre-compilation period, so even if Fn () the called function can also be executed before the function is declared.

Function Fn () {// declarative function

Alert ("declarative functions executed ");

}

 

Var Fn = function () {// value-assigned function

Alert ("a value-assigned function is executed ");

}

</Script>

 

// Code block 1

<Script type = "text/javascript">

Alert (str); // the browser reports an error, but no information window is displayed.

</Script>

// Code block 2

<Script type = "text/javascript">

Alert (str); // pop-up window "undefined"

Var str = "aaa ";

</Script>

// Js declares and processes the variables during preprocessing, but does not initialize or assign values. As a result, the variables in the second part of the code block are unfiened, the variable in code 1 does not exist at all, so the browser reports an error.

 

 

After understanding the terms above, I believe you have a rough impression on the JS operating mechanism. Now let's look at an example:

 

The Code is as follows:

<Script type = "text/javascript">

Fn (); // browser error: "undefined"

</Script>

<Script type = "text/javascript">

Function Fn () {// function 1

Alert ("executed function 1 ");

}

</Script>

 

Why does the browser report an error when running the code above? Isn't declared functions processed in the pre-processing period? How can I still find the Fn () function? In fact, this is a misunderstanding. We mentioned above that the JS engine is executed in sequence according to the code block. In fact, the complete explanation should be based on the code block for preprocessing and execution, that is to say, only the declared functions and variables of the executed code blocks are pre-processed. For unloaded code blocks, preprocessing cannot be performed, which is also the core of simultaneous compilation and processing.

 

Now let's summarize:

 

The Code is as follows:

Step 1. Read the first code block.

Step 2. Perform syntax analysis. If there is a mistake, a syntax error is reported (for example, the parentheses do not match), and jump to step 5.

Step 3. Pre-compile the var variables and function definitions (errors will never be reported because only correct declarations are parsed ).

Step 4. Execute the code segment. If there is an error, an error is returned (for example, the variable is undefined ).

Step 5. If there is another code segment, read the next code segment and repeat step 2.

Step6. end.

 

According to the execution sequence of the HTML document stream, the JavaScript code that needs to be executed before page element rendering should be placed in the <script> code block before <body>, after the page element is loaded, the js file must be placed behind the </body> element. The onload event of the body Tag is executed at the end.

The Code is as follows:

<Script type = "text/javascript">

Alert ("first ");

Function Fn (){

Alert ("third ");

}

</Script>

<Body onload = "Fn ()">

 

</Body>

<Script type = "text/javascript">

Alert ("second ");

</Script>