javascript system series: analysis of browser loop event in js

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

![image.png](https://img-blog.csdnimg.cn/img_convert/af9b1c48328a9b2065dfdd4a36f03e14.png#clientId=u627a413d-c4c6-4&from=paste&height=669&id=uc40536d6&margin=[object Object]&name=image.png&originHeight=1338&originWidth=1948&originalType=binary&ratio=1&size=579642&status=done&style=none&taskId=ua2f7d6a0-4f17-4cb5-9052-d3b7dbd87f6&width=974)

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

Tags: Front-end JQuery Optimize eventloop

Posted on Wed, 17 Nov 2021 19:30:35 -0500 by shanksta13