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]([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) = 'blue'
  console.log(2) = 'red'
// Inside es6 is a micro task
}, 0)
// Promise1
// setTimeout1
// Promise2
//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('script start')
  }, 0)
new Promise(function(resolve){
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
script end
async1 end

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


  • 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