About the execution sequence of JavaScript and the sequence of javascript

About the execution sequence of JavaScript and the sequence of javascript

Although modern browsers can download JavaScript in parallel (Some browsers), their execution is still carried out in the order of introduction considering the JavaScript dependency.

This article records some of the things I have learned in JavaScript, deepen my memory and record it, so that I can easily review it later.

Execution sequence in html document

By comparing the execution sequence of js code, you can intuitively feel the execution sequence. However, the execution sequence of js Code is complicated. Sometimes we write JavaScript code in html, and the html document parsing process in the browser is like this: the browser parses the Page Structure and information from top to bottom according to the document stream. Js Code, as an embedded script, is also considered part of the html document. Therefore, the execution sequence of js Code during loading is determined by the appearance of the script tag <script>. (The following is a chestnut)

<! DOCTYPE html> <script> console. log ("top script "); </script> 
For external js file scripts imported using the src attribute of the script label <script>, it will also be executed according to the order in which the statements appear, and the execution process is part of the document loading, the execution will not be extended because it is an external js file.
// Load B first. and execute the Code <script src = "B. js "> </script> // then execute the following code in sequence <script> console. log (1); </script>
Pre-compile
When the js engine parses, it will pre-compile all declared variables and functions for processing.
Variable increase
console.log(a); // undefinedvar a = 1;console.log(a); // 1
Pre-resolution Functions
f(); // 1function f() {  console.log(1);};
Details: hoisting)
Code multipart execution
JavaScript code is executed by block. A code block is a code segment separated by a <script> tag. (The following is a chestnut)
<Script> // code segment 1 var a = 1; </script> <script> // code segment 2 function f () {console. log (1) ;}; </script>
Because js is executed by code block. When the browser parses the html document stream, if it encounters a <script> tag, js will pre-compile the code after the code block is loaded, and then execute it. After the execution is complete, the browser will continue to parse the html document stream of Simon, and js is ready to process the next code block.
There is a small pitfall. Because js is executed by block, a syntax error will be prompted when a variable or function declared in the subsequent block is called in a js block. However, different blocks belong to a global scope. That is to say, the variables and functions between blocks can be shared. (The following is a chestnut)
<Script> // code snippet 1 console. log (a); f (); </script> <script> // code segment 2 var a = 1; function f () {console. log (1) ;}; </script>
Because js processes code by block and follows the parsing sequence of the html document stream, a syntax error is displayed in the preceding example. However, this error does not occur if the file is accessed again after the file stream is loaded. (The following is a chestnut)
<Script> window. onload = function () {// initialize the event handler function on the page // code segment 1 console. log (a); f () ;}</script> <script> // code segment 2 var a = 1; function f () {console. log (1) ;}; </script>
For the sake of security, js code execution is generally allowed after page Initialization is complete, which can avoid the impact of some network speeds on js execution. At the same time, the restrictions on js execution by html document streams are also avoided.
To sum up, the steps for executing javascript are as follows:

1. Read the first code block

2. Perform syntax analysis on the code block. If a syntax error occurs, perform step 1.

3. Pre-compile the var variable and function-defined function (the value-type function will not be pre-compiled)

4. Execute the code block. If there is an error, an error is returned.

5. If there is another code block, read it into the next code block and repeat Step 2.

6. End