What is the difference between macro tasks and micro tasks

1. MacroTask, MicroTask

• 1. Both are asynchronous
• 2. The difference between synchronous and asynchronous:

• (1) Synchronous code execution: you write in what order, it will be executed in what order, obviously, synchronization task is blocked, that is to say, only after the completion of the previous sentence, can proceed to the next sentence
• (2) Execution of asynchronous code: Is common asynchronous callback, not executed in the order of writing is asynchronous, but asynchronous is not equal to the block, the callback is called the timing of the by executing it will be implemented, and step by step down, just not in accordance with the procedures written order from top to bottom, so if some tasks to take up the entire thread, Asynchronous tasks will also be blocked because JS is single-process, single-thread
• (3) Classical JS are single-process single-thread, single modern JS has broken through this, we have methods to create additional processes to handle tasks together, NodeJS can also create threads in the same process, browsers also have to support thread plans
• (4) Asynchronous in addition to callback, there are other types, such as task, task is a queue type, the first registered task is executed first, task, according to the execution of the timing is divided into macro task and micro task, according to what to distinguish the execution time, need to see the design part

• 3. Process switching must be a macro task, because it takes a lot of resources
• 4. Thread switching is a microtask because you only need to switch within the same process
• 5. To be more precise, many microtasks are the result of fiber switching, which is a smaller concept than threading
• 6. Why are timer related tasks macro tasks?

• (1) Because the timing is real-time, it must not be blocked, so the timer is designed to be managed in another process, so the timer task will have process switch, so it can only be macro task

• 7. Why are events macro tasks?

• Events trigger is dependent on the browser’s implementation, the platform has its own event registration and distributing mechanism, such as the kernel libuv nodeJS, so anyway, events led to the independence of the registry and distributing mechanism, he won’t and JS, there is a process, event management center must be implemented in another process, then distributed to the event, Macro tasks

• 8. Within the syntax of JS itself

• (1) For example async/await, which itself is an iterator. The iterator makes use of fibers and switches between different fibers, so it is a microtask
• (2) process and fiber (line) the biggest difference is: process occupies separate resources, that is, will not share CPU and memory, and threads down, are sharing CPU and memory, just in a space in the split, do switch
• (3) If the JS command itself is the process, there is no way to get the data outside the context, because there is no shared memory
• (4) The part of JS itself must be smaller than the thread

• 9. Non-js

• Non-js, because it is often designed not to be blocked by JS, will open a separate process for management, so that out are macro tasks

• 10. So why are things like the Observer(MutationObserver, etc.) and some renders microtasks?

• (1) Although they have nothing to do with the JS itself, their execution timing is dependent on the process in which they are executed
• (2) For example, MutationObserver observes the DOM. Its function is to respond to changes in the DOM, so it will be in the process of managing the DOM
• (3) Rendering is the same, it is a callback made at a certain step in the rendering process, without switching out of its own space

• 11. During the execution of a microtask, it can obtain the context outside the task
• 12. During the execution of the macro task, it cannot obtain the context outside the task
• 13. Why are timer tasks macro tasks?

• (1) Timer and timer task can be separated, first think of timer as a time management center
• (2) Then register tasks that are independent of time
• (3) The time management center is related to time. When the time management center finds that the time is up and the task needs to be executed, it will find out the registered task from the task list and inform JS to execute the task
• (4) So you can see that the time manager (timer process) and the task (JS runtime) are unrelated and do not share context, so it is a macro task
• (5) The function that controls rendering such as requestAnimationFrame, which itself asks what to do before the next frame is redrawn, is designed to be in the process of rendering, and then should do something related to rendering, i.e. the task is consistent with the context of the space it is in

• 14. Order of execution of micro and macro tasks

• (1) Because microtasks do not require execution context (in this case, resource switching), it can do all microtasks in one context switch interval
• (2) Macro task will be executed slowly because it needs to switch context
• (3) So registered microtasks are executed first, followed by macro tasks
• (4) This is equivalent to a context switch, and if new microtasks or macro tasks are registered during this time, the above process is repeated