Put the first little sister blog address: https://www.cnblogs.com/zhengyeye/p/10774837.html .
This article is to look at the little sister of the blog before allowing himself the task of macro and micro-tasks to solve the problem have more understanding.
The front inside, a lot of very good little sister, little sister a lot closer to good, a lot to learn them.
Closer to home
1.js is a single-threaded programming language
means js at the same time can only do one thing, it means that only one call stack (call stack). why?
Js is because the browser scripting language, is mainly used to operate with the user's main operating things like DOM.
If she has multiple threads, such as thread A wants to add a DOM node, thread B wants to delete nodes will be hell broke loose.
2.Event Loop (event loop)
synchronous and asynchronous tasks, respectively tasks into a different place, clocked into the main thread, into the Event Table and asynchronous callback function is registered, then
moved into the Event Queue tasks are performed in the main thread until it is finished after empty, go EventQueue reads the corresponding function, into the main thread.
These tasks is repeated Event Loop (event loop).
3. The micro-macro task and task
js Task Queue There are two types: the micro and macro tasks Task
macrotask: Script (global tasks), setTimeout, setInterval, setImmediate, I / O, UI rendering
micro tasks: process.nextTick, promise, object.observer, MutationObserver
4. Some face questions
setTimeout(_=>console.log(4));
new Promise(resolve =>{
resolve();
console.log(1);
}).then(_=>{
console.log(3);
})
console.log(2);setTimeout belongs macrotask, new Promise task belongs to synchronization, so a direct output,
behind .then () task micro added, followed directly outputs 2
micro task .then () to be performed than setTimeout, so the output 3
final output 4
parsed :
the role of setTimeout after waiting for a given time to generate a new macro task for its callback;
Promise.then is representative micro task
codes new Promise instantiation process are performed simultaneously in , while asynchronous callback is registered then executed
after the completion of the synchronization code execution go back and check whether there is an asynchronous task is completed, and executes the corresponding callback, but the task will be executed before the micro-macro task
setTimeout(function(){
console.log('定时器开始啦啦啦')
})
new Promise(function(resolve){
console.log('马上执行for循环');
for(var i=0;i<10000;i++){
i==99&&resolve();
}
}).then(function(){
console.log('执行then函数')
});
console.log('代码执行结束')Implementation of the results: once for loop code execution ends, then perform the function of the matter, the timer starts it (ibid parsing)
console.log(1);
setTimeout(()=>{
console.log(2);
Promise.resolve().then(()=>{
console.log(3);
})
});
new Promise((resolve,reject)=>{
console.log(4);
resolve(5);
}).then((data)=>{
console.log(data)
})
setTimeout(()=>{
console.log(6)
})
console.log(7)Execution results 1,475,236
executed Script global, direct output 1, the latter is setTimeout macrotask
new Promise identical to the synchronization task, the output 4, the latter .then () is added to the micro-task queue, behind setTimeout macro task
then performs a global Script, 7 direct output
after performing all tasks macro then all output 5 micro jobs in the queue
and then the rest of the macro task execution, output 2
micro-step task and executing tasks generated red The output 3
final performance last macro setTimeout task, output 6
console.log('script start')
setTimeout(function(){
console.log('setTimeout')
},0)
Promise.resolve().then(function(){
console.log('promise')
}).then(function(){
console.log('promise2')
})
console.log('script end')Implementation of the results
script start script end promise promise2 setTimeout
Analysis:
Global script task, direct output script start, script end
next perform micro tasks, outputs promise promise2
final output setTimeout
all micro-macro task is always a task before the next executed completely