JavaScript execution sequence

Preface

I have been familiar with JavaScript for a while, but I have learned a lot about it. A lot of basic knowledge is still lacking. Therefore, we began to use blogs to slowly record and accumulate this part of knowledge. I believe that this part of knowledge will be gradually overcome!

The first record is not related applications, but a very underlying knowledge-the JavaScript parsing engine. This part of knowledge is also associated with problems encountered in the project.
Background

In a script, the execution sequence is to execute alert () in the js file first, and then execute the function when I call the function. At that time, I got a question: why did I execute alert () before executing the function? Obviously, he didn't execute the function I defined, but executed alert ();

 Js execution Test<Script> var a; a = 1; function f1 () {alert ("first function");} alert ("test"); function f2 () {alert ("second function");} alert (a); function f3 () {alert ("third function") ;}</script>Test

The execution result is: Test 1

Prerequisites

You need to understand two concepts: one is the JavaScript parsing engine, and the other is the relationship between the JavaScript parsing engine and the browser.

1. The JavaScript parsing engine interprets programs that execute scripts. It can be viewed as an interpreter.
This engine requires two functions:
The first is to explain the script program and read the js Code.
Second, execute the script program. After reading the script program, execute the program.
For example, if you see an example in a blog, when you write var a = 1 + 1, the JavaScript engine will understand (PARSE) your code, and change the value of a to 2.
When I look at this concept, I think of another concept: the compiler, which just compiles the source code into another code (such as machine code or bytecode ). It seems like a translator who translates Chinese into English. It cannot execute this program.
2. Relationship between the JavaScript parsing engine and the browser JavaScript parsing engine is one of the components of the browser.
After understanding the premise, we know that the js Code we write needs to be parsed and executed through the JavaScript parsing engine in the browser. You can google the specific parsing mechanism, I don't know much about this part, but I only know about it, but I think it is enough for me to know other things.
The parsing mechanism is divided into two major processes: one compilation process and the other execution process. The compilation process is to build a syntax tree in the memory. The execution process is to execute the code according to the syntax tree. I am not clear about the specific internal execution of compilation and execution.

The execution sequence of js Code on the page is based on some theoretical knowledge. Let's take a look at the execution sequence of js Code on the page during actual application. These are some of the very vivid responses of the above theoretical knowledge.

1. The engine parses js --- the relationship between pre-compilation and execution sequence. It processes all declared variables and functions during the pre-compilation period. Therefore, when the JavaScript interpreter executes the following script, no error is reported:

 Js execution Test<Script> alert (a); // undefinedvar a; a = 1; function f1 () {alert ("first function");} alert ("test "); // test function f2 () {alert ("second function");} alert (a); // 1 function f3 () {alert ("third function") ;}</script>Test

Execution result: undefined Test 1

Pre-Compilation: Processes declared variables and functions so that they are visible to all code during execution.

However, you will also see that when you execute the above Code, the prompt value is undefined, not 1. This is because the variable initialization process occurs during the execution period, rather than the pre-compilation period. During the execution period, the JavaScript interpreter parses the code in sequence. If the variable is not assigned a value in the previous code line, the JavaScript interpreter uses the default value undefined. Because a value is assigned to variable a in the second line, the value of variable a is 1 rather than undefined in the third line code.

2. file stream loading --- js is executed in the HTML Document Stream Sequence

Js can be seen as an integral part of HTML documents. HTML documents are parsed step by step from top to bottom. This applies to both the <script> </script> block and the js file that uses external references.

Use external js file reference to write the above Code to the js file, and the execution result remains unchanged.

 Js execution Test<Script type = "text/javascript" src = "Untitled-2.js"> </script>Test

Js files

Var a; a = 1; function f1 () {alert ("first function");} alert ("test"); function f2 () {alert ("second function");} alert (a); function f3 () {alert ("third function ");}

Execution result: Test 1 3. After the file stream is loaded, change the js execution sequence according to the event mechanism.

Similar to calling a function, where the call is made, it is executed here. If the call is not made, it is not executed. From the code above, we can see that a click event is added for the tag, so when you click it, the corresponding function is executed.

Summary

So we can explain why alert () is executed, but the function is not executed. The js parsing engine requires a pre-compilation process to process the Defined variables and functions. Js also needs to be executed according to the sequence of HTML document streams. This is the process before executing a function defined by myself. Therefore, executing a function defined by myself is actually a reflection of the event mechanism calling js.