Detailed explanation of the execution sequence of javascript Running Mechanism

JavaScript is a descriptive scripting language. It 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:

<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:

<Script type = "text/javascript"> alert (str); // a browser error occurs because no str is defined, the following cannot run alert ("I Am code block 1"); // It is not run here var test = "I Am a variable in code block "; </script> <script type = "text/javascript"> alert ("I Am code block 2"); // here there is a run to alert (test ); // "I Am a code block variable" is displayed. </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.

<Script type = "text/javascript"> function Fn () {// declarative function} var Fn = function {// value assignment 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.

<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: "declarative function executed". The function is declared and processed during the pre-compilation period, therefore, the function can be executed even if Fn () is called before the function is declared. Function Fn () {// declarative function alert ("executed declarative function");} var Fn = function () {// value-assigned function alert ("executed value-assigned function") ;}</script>

// Code block 1 <script type = "text/javascript"> alert (str); // the browser reports an error, but there is no pop-up information window </script> // code block 2 <script type = "text/javascript"> alert (str ); // pop-up window "undefined" var str = "aaa"; </script> // js declares and processes variables during preprocessing, but does not initialize or assign values, therefore, the variables in the second part of the code block are unfiened, And the variables in the Code do not exist at all. Therefore, 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:

<Script type = "text/javascript"> Fn (); // browser error: "undefined" </script> <script type = "text/javascript"> function Fn () {// function 1 alert ("function 1 executed") ;}</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:

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 js Code that needs to be executed before page element rendering should be placed inIn the preceding <script> code blockAfter the element, the onload event of the body Tag is executed at the end.

<script type="text/javascript">    alert("first");    function Fn(){    alert("third");    }</script>    <script type="text/javascript">    alert("second");</script>