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
  ​