Hello, I'm Lanfeng. Today I'm mainly sharing with you the browser event loop related to eventloop: eventloop, micro task, macro task, etc. this content is commonly used in our work and is also a question often asked in interviews with large factories. I hope the following chapters will be helpful to you.
event loop
event loop is the implementation principle of asynchronous callback
- The synchronization code is executed on the Call Stack line by line
- In case of asynchrony, it will first "record" and wait for the opportunity (timing, network request, etc.)
- When the time comes, move to the Callback Queue
- If the Call Stack is empty (i.e. the synchronization code is executed), the Event Loop starts to work
- Poll and find the Callback Queue. If any, move it to the Call Stack for execution
- Then continue polling (like a perpetual motion machine)
1. Browser process
- Each page card is a process (not affecting each other)
- The browser also has a main process (user interface)
- Rendering process each page card has a rendering process (browser kernel)
- Network progress (processing requests)
- GPU process 3d rendering
- Third party plug-in process
Process is the basic unit of computer scheduling
2. Rendering process (including multiple threads)
- GUI rendering process (of rendered pages)
- js engine thread, which is mutually exclusive with Yemen rendering
- Event triggered thread, independent thread EventLoop
- DOM events also use callbacks. Based on event loop, event click, setTimeout and ajax are also independent threads
3. Macro task and micro task
- The asynchronous methods provided by the macro task host environment are macro task script, ui rendering, setTimeout, setinterval, Ajax and DOM events
- promise async/await mutationObserver is provided by the micro task language standard
- Micro tasks are executed earlier than macro tasks

document.body.style.background = 'blue' console.log(1) setTimeout(()=>{ console.log(2) document.body.style.background = 'red' },0) console.log(3)
// Inside es6 is a micro task Promise.resolve().then(()=>{ console.log('Promise1') setTimeout(()=>{ console.log('setTimeout2') }) }) setTimeout(()=>{ console.log('setTimeout1') Promise.resolve().then(()=>{ console.log('Promise2') }) }, 0) // Promise1 // setTimeout1 // Promise2 //setTimeout2
//async returns a promise generator +co // Await = > yield if a promise is output, the promise.then method will be called async function async1(){ console.log('async1 start') //The browser recognizes async + await. If await is followed by promise, the then method of this promise will be called directly by default await async2(); console.log('async1 end') } async function async2(){ console.log('async2'); } console.log('script start') setTimeout(()=>{ console.log('setTimeout') }, 0) async1(); new Promise(function(resolve){ console.log('promise1') resolve() }).then(function(){ console.log('promise2') }) console.log('script end') /** Script start and async1 start are executed by default Micro task queue [async1 end, promise2] Macro task queue [setTimeout] script start async1 start async2 promise1 script end async1 end promise2 setTimeout **/
4. event loop and DOM rendering
- Go back to the process of event loop again
- JS is single threaded and shares a thread with DOM rendering
- When JS is executed, some opportunities must be reserved for DOM rendering
- Each time the Call Stack is cleared (i.e. the end of each polling), the synchronization task is completed
- All are opportunities for DOM re rendering. If the DOM structure changes, it will be re rendered
- Then trigger the next Event Loop
◆ macro task: triggered after DOM rendering, such as setTimeout
◆ micro task: triggered before DOM rendering, such as Promise
reason
- Micro tasks are defined in ES6 syntax
- Macro tasks are defined by the browser
Pay attention to the official account: programmer Shi Lei