Although modern browsers can download JavaScript (some browsers) in parallel, their execution is still carried out in the order of introduction, given the dependencies of JavaScript.
This article records some things I have understood when reading books in JavaScript, deepens my memory and organizes them to facilitate subsequent review.
Execution order in html document
The image of js code execution order comparison, users can intuitively feel this execution order. However, the execution order of js code is relatively complicated. Sometimes we write js code into html, and the process of parsing html documents in the browser is like this: the browser gradually parses the page structure and information from top to bottom according to the document flow. As an embedded script, js code is also considered as an integral part of the html document. Therefore, the execution order of js code when loading is also determined according to the occurrence of the script tag <script>. (A chestnut below)
<!DOCTYPE html>
<script>
("Top Script");
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
("Head script");
</script>
</head>
<body>
<script>
("Page script");
</script>
</body>
</html>
<script>
("Bottom script");
</script>
There are also external js file scripts imported through the src attribute of the script tag <script>, which will also be executed in the order in which its statements appear, and the execution process is part of the document loading and will not be delayed because it is an external js file.
// Load first and execute the code inside<script src=""></script> // Then execute the following code in order<script> (1); </script>
Precompiled
When the js engine parses, it will precompile all declared variables and functions.
Variable enhancement
(a); // undefined var a = 1; (a); // 1
Preparse function
f(); // 1
function f() {
(1);
};
Details: JavaScript variable declaration hoisting
Execute code in chunks
js executes code by block, and the so-called code block is a code segment separated by <script> tag. (A chestnut below)
<script>
// Code Snippet 1 var a = 1;
</script>
<script>
// Code Snippet 2 function f() {
(1);
};
</script>
Because js is executed according to code blocks. When the browser parses the html document stream, if it encounters a <script> tag, js will wait until the code block is loaded before precompiling the code and then executing it. After execution, the browser will continue to parse Ximen's html document stream, and js is also ready to process the next code block.
There is a small pit. Since js is executed by block, calling variables or functions declared by the subsequent block in a js block will prompt a syntax error. However, different blocks belong to a global scope, that is, variables and functions between blocks can be shared. (A chestnut below)
<script>
// Code Snippet 1 (a);
f();
</script>
<script>
// Code Snippet 2 var a = 1;
function f() {
(1);
};
</script>
Since js processes code by block and also follows the parsing order of html document streams, you will see syntax errors in the above chestnut. However, this error will not occur if the document stream is accessed again after it is loaded. (A chestnut below)
<script>
= function(){ // Page initialization event handling function // Code Snippet 1 (a);
f();
}
</script>
<script>
// Code Snippet 2 var a = 1;
function f() {
(1);
};
</script>
For security reasons, js code execution is generally allowed after the page is initialized, so that some network speed can be avoided on js execution. At the same time, it also avoids the limitations of html document streams on js execution.
To sum up, the steps of JavaScript when executing:
1. Read the first code block first
2. Perform syntax analysis of the code block. If there is a syntax error, directly execute step 5.
3. Perform "precompilation processing" on functions defined by var variables and function (assignment functions will not be precompiled)
4. Execute code blocks, if there is any error, it will be reported.
5. If there is another code block, read the next code block and repeat step 2
6. End