Table of contents
single thread
JavaScriptThe language has the characteristics of single thread, and only one thing can be done at the same time. This is because the scripting language was born JavaScriptto handle user interaction and operations on the page . DOMIf an DOMelement is added and deleted, it is not done at the same time. It should be added first, then deleted, and the events are in order.
The characteristic of single thread is that all tasks need to be queued up, and the next task will be executed after the previous task is completed. This will cause problems: if the JS execution time is too long, this will cause the page rendering to be incoherent, causing the page rendering and loading to be blocked.
synchronous and asynchronous
In order to solve this problem, using the computing power of multi-core CPU, HTML5the Web Worker standard is proposed, which allows JavaScriptscripts to create multiple threads, and JSsynchronous and asynchronous appear in it.
Synchronization
Execute the next task after the previous task is completed,
such as:
console.log(1);
console.log(2);
console.log(3);
// 1 2 3
Asynchronously
while doing this, you can also handle other things
such as:
console.log(1);
setTimeout(function() {
console.log(3);
},1000);
console.log(2);
// 1 2 3
If it is executed synchronously, the next step must be executed through the timer first, and the efficiency of the browser will be greatly reduced.
So asynchronously can print 2 first and wait for the timer to expire before printing 3
event loop
If so, what is the result printed?
console.log(1);
setTimeout(function() {
console.log(3);
},0);
console.log(2);
- JavaScript synchronization tasks are executed in the main thread, forming an execution stack
- Asynchronous tasks are implemented through callback functions, and tasks are added to the task queue
Steps:
- Execute the synchronization tasks in the execution stack first
- Asynchronous tasks (callback functions) are placed in the task queue
- Once all the synchronous tasks in the execution stack are executed , the system will read the asynchronous tasks in the task queue in order, so the read asynchronous tasks end the waiting state, enter the execution stack, and start executing
So the result printed above is still
similar to 1 2 3
console.log(1);
document.onclick = function() {
console.log('click');
}
console.log(2);
setTimeout(function() {
console.log(3)
}, 3000)
<!-- 打印1 2 如果点击了，打印click，无论是否点击3秒后都打印3 -->
Synchronous tasks are executed in the execution stack, and asynchronous tasks are processed by the asynchronous process and placed in the task queue. After the tasks in the execution stack are executed, they will go to the task queue to check whether there are asynchronous tasks to execute. Because the main thread continuously obtains tasks and executes them repeatedly Tasks, reacquiring tasks, and re-executing, so this mechanism is called an event loop （ event loop）.
Steps
