Home > Article > Web Front-end > js execution sequence analysis

js execution sequence analysis

小云云Original: 2018-03-07 10:56:011575browse

JavaScript is a descriptive scripting language that is dynamically parsed and executed by the browser. There are generally two ways to define functions. Browsers have different parsing orders for different ways. This article mainly shares with you the js execution sequence analysis, hoping to help everyone.

The code is as follows:

//“定义式”函数定义 
function Fn1(){ 
alert("Hello World!"); 
} 
//“赋值式”函数定义 
var Fn2 = function(){ 
alert("Hello wild!"); 
}

During the page loading process, the browser will scan each js code block (or file) on the page or loaded. If it encounters a definition If you encounter an assignment-type function, preprocessing will be performed (similar to compilation of C, etc.). After the processing is completed, execution will start from top to bottom; if you encounter an assignment-type function, you will just assign the function to a variable without preprocessing (similar to 1. (Principle that variables must be defined first and then referenced), they will not be processed until they are called. Here is a simple example:
The code is as follows:

//“定义式”函数定义 
Fn1(); 
function Fn1(){ 
alert("Hello World!"); 
}

Execute normally, "Hello World!" pops up, the browser preprocesses Fn1, and then starts execution from Fn1(); .
The code is as follows:

//“赋值式”函数定义 
Fn2(); 
var Fn2 = function(){ 
alert("Hello wild!"); 
}

Firebug reports an error: Fn2 is not a function. The browser does not preprocess Fn2 and executes it sequentially, so the error Fn2 is not defined.

3. Processing of code blocks and js files
"Code block" refers to a pair of3e3c0f8accc1f8d6647a8698b1921fab2cacc6d41bbb37262a98f745aa00fbf0 The js code wrapped in the tag refers to the file, nonsense:D
The browser scans each block or file independently, and then executes the global code sequentially (mentioned in 2). Therefore, in one block (file), the function can be "defined" after the call; but in two blocks, the block in which the function is defined must be before the block in which the function is called.
It’s very convoluted, just look at the example:
The code is as follows:

<script type="text/javascript"> 
Fn(); 
</script> 
<script type="text/javascript"> 
function Fn(){ 
alert("Hello World!"); 
} 
</script> 
// 报错：Fn is notdefined，两个块换过来就对了

4. Repeatedly defining a function will overwrite the previous definition
This is the same as the variable The repeated definition is the same, the code:
The code is as follows:

function fn(){ alert(1); 
} function fn(){ alert(2); 
} fn(); 
// 弹出：“2”

What if this is the case:
The code is as follows:

fn(); 
function fn()
{ alert(1); } 
function fn()
{ alert(2); } 
// 还是弹出：
“2”

Still pops up "2", why? 2 has all been explained...

5. The execution of the body's onload function and the body's internal function
The internal function of the body will be executed before the onload function. Test code:
The code is as follows:

//html head... 
<script type="text/javascript"> 
function fnOnLoad(){ 
alert("I am outside the Wall!"); 
} 
</script> 
<body onload="fnOnLoad();"> 
<script type="text/javascript"> 
alert("I am inside the Wall.."); 
</script> 
</body> 
//先弹出“I am inside the Wall..”; 
//后弹出“I am outside the Wall!”

The triggering condition of the body's onload event is that the body content is loaded, and the js code in the body will run before this event is triggered (why? 6 tells you...)

6. Is JavaScript multi-threaded or single-threaded?
Strictly speaking, JavaScript does not have the concept of multi-threading. All programs are executed "single-threaded" in sequence.
To give an inappropriate example:

function fn1(){ 
var sum = 0; 
for(var ind=0; ind<1000; ind++) { 
sum += ind; 
} 
alert("答案是"+sum); 
} 
function fn2(){ 
alert("早知道了，我就是不说"); 
} 
fn1(); 
fn2(); 

//先弹出：“答案是499500”， 
//后弹出：“早知道了，我就是不说”

Then you must ask: Aren’t delayed execution and Ajax asynchronous loading multi-threaded? Yes, the following program does look like "multi-threading":
The code is as follows:

function fn1(){ 
setTimeout(function(){ 
alert("我先调用") 
},1000); 
} 
function fn2(){ 
alert("我后调用"); 
} 
fn1(); 
fn2(); 
// 先弹出：“我后调用”， 
// 1秒后弹出：“我先调用”

It seems that fn2() and the delay program are separated into two processes, but in fact, This is the "callback" mechanism in JavaScript at work, which is similar to the "interrupt and response" in the operating system - the delay program sets an "interrupt", then executes fn2(), and then calls back after 1000 milliseconds are up. Execute fn1().
Similarly, the function called by the body's onload event in 5 also uses the callback mechanism-after the body is loaded, the callback executes the fnOnLoad() function.
The same is true for the data processing functions in Ajax requests.
For a more in-depth discussion of JavaScript thread issues, see this article My opinion on threads in JavaScript and the introduction to JavaScript multi-threaded programming on infoQ.
I’m sleepy, let’s talk about the callback function.

7. Callback function
What is the callback function used for? It’s just a function executed by callback, nonsense :D
As mentioned in 6, the most common callbacks are the calling functions of browser events such as onclick, onmouseotutorialver, onmousedown, onload, etc.; and the processing of Ajax asynchronous request data. Function; setTimeOut delayed execution, setInterval loop execution function, etc.
Let’s just write a pure callback function to play:
The code is as follows:

function onBack(num){ 
alert("姗姗我来迟了"); 
// 执行num个耳光 
} 
function dating(hours, callBack){ 
var SP= 0; // SP,愤怒值 
//女猪脚在雪里站了hours个钟头 
//循环开始.. 
SP ++; 
//循环结束... 
callBack(SP); 
} 
dating(1, onBack);

Related recommendations:

About js execution order solution ideas

JS execution order in the page_javascript skills

JavaScript execution order analysis

The above is the detailed content of js execution sequence analysis. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed graphic explanation of Switchery.jsNext article：Detailed graphic explanation of Switchery.js

See more

js execution sequence analysis

Related articles