Js front-end basis of implementation mechanisms
1, Introduction to understand
js this is single-threaded, but a lot of the time, single-threaded efficiency is too slow, affect the progress, so there has been the development of multi-process, of course, this is only station in a single thread in its decomposition team multi-step problem solving.
2, synchronous asynchronous understand
synchronization refers to the operations performed in accordance with the order, before the current one thing unfinished, the latter event can not start.
Induction is not the same, asynchronous refers to more than one thing can operate simultaneously, without who's who and so on.
Synchronization is only like a queue that only one window can solve the problem, while asynchronous is like a queue, but the queue each have a window can solve the problem.
Synchronous Asynchronous difference
3, micro and macro
here only need to know what the microscopic events, events are classified as micro-micro queue to go, mainly Promise.then back off function
macro event more, such as timers, script block, IO devices, etc.
4, task queue
when the event execution encountered API asynchronous operation is submitted to the browser, but webAPI will be registered within the list, and then according to priority (priority of each browser is not the same) to return to the task queue inside , task queue will be divided into micro and macro queue queue, the corresponding event is microscopic and macroscopic events.
5, the event loop
1) js executed in an execution stack in the event
2) events in the execution stack before execution inside encountered asynchronous operation will return to the WebApl, WebApi then returned to the queue.
3) the stack after the execution of the event is finished, first in the queue to find whether there is microscopic events have on the implementation of
4) micro event is finished, the queue to see if there are macro-tasks, and then follow the steps in 1234 to
5) so the execution is constantly looking for event loop
6, code implementation
1) First, a simple example
<script type="text/javascript">
new Promise(function(resolve){
console.log(1)
for( var i=0 ; i<10000 ; i++ ){
i==9999 && resolve()
}
console.log(2)
}).then(function(){//promise的回掉函数
console.log(5)
});
setTimeout(function(){console.log(4)},0);
console.log(3);
</script>
The above code execution order is what is it, according to the following mechanisms can take over the event loop
1) js executed in an execution stack in the event (script is the first macro-task, that is, the execution stack)
2) inside the first execution in the execution stack event , promise first function is a normal function, which is performed so the code, the results obtained 1,2 , .then met then back out to the function returns the WebApl, WebApi back to the micro queue. Further down the implementation met setTimeout timer, macro task will be returned to the macro task list queue and then re-execute the last step to get 3
3) After the execution stack in the event finished, first in the queue to find whether there is microscopic events, our microscopic task queue there .then back off function, it is possible to perform this operation to get the result 5
4) micro event is finished, and then queue to see if there are macro-event, then found a timer so the execution after the results of 4
5) continue to view the queue until the queue is empty to
the final output can answer is 12354
Follow the steps above you can test to see whether they really understand, here is a slightly more complex code execution.
console.log('1');
setTimeout(function() {
console.log('2');
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
You can write the order of execution of the above-js to perform to see if you really understand and grasp the
final result is 1,7,8,2,4,5,9,11,12.
7, summarizes
matter how complex event, just remember, execute seen, first met regardless of asynchronous operation, go inside the execution stack code execution is completed before then macro micro queue queue.
