A short article will directly let you understand what the event loop mechanism is

Partner of crab Castle King 2021-05-03 19:19:35
short article directly let understand

Single threaded JavaScript

as everyone knows , our JavaScript It's a kind of Single thread Language , It's single threaded , It's determined by the purpose and purpose of its work : As a browser scripting language ,JavaScript Its main purpose is to interact with users , And operation DOM. If JavaScript It's not a single threaded language that can easily cause some conflicts . such as , Assume JavaScript There are two threads at the same time , A thread is in a DOM Node add to Content , And the other thread is Delete I've got this node , Which thread should the browser follow ?

So here comes the question , since JavaScript If it's a single threaded language , So how does it implement some asynchronous operations ?

The answer is what we're going to talk about today :JavaScript The event loop of

Before we talk about the cycle of events , Let's talk about some basic knowledge first , It is convenient for students to make the whole event cycle clearer , More deeply connected .


although JS The engine is single-threaded , But its host environment ( The browser or node) It's multithreaded , That is, there are other threads in the browser kernel that can be used to assist JS Execution of engine threads .

Here are some browser threads , Students can have a general understanding of :

  1. GUI Rendering engine threads
  2. JS Engine threads
  3. Timer trigger thread
  4. Browser event thread
  5. http Asynchronous thread
  6. ......

JS Engine threads

JS Engine threads , We can also call it the main thread , Its main function is to run JS Synchronization code , give an example :

var a = 1 //1
console.log() //2
setTimeout() //3
ajax() //4
 Copy code 

among 1,2 Line code is synchronous code , Execute directly in the main thread , The first 3,4 Line code is an asynchronous function , Assigned by the main thread to the timer trigger thread and http Asynchronous threads are two threads that process asynchronous code

Asynchronous operation process

The timer trigger thread we mentioned earlier , Browser event threads and http Asynchronous threads are all asynchronous operation processes , These processes mainly deal with asynchronous tasks assigned by the main thread , These asynchronous tasks thrown by the main thread will specify their own callback functions , When the asynchronous operation process finishes executing the task , Will send the returned callback function to the task queue .

Task queue

We can think of task queue as a static queue storage structure ( fifo ), This storage structure stores some callback functions thrown by asynchronous operation process ( After the asynchronous task is completed , Just throw its callback function in the task queue . For example, the browser event process needs to handle a click event , This event has a callback function , It's after the click event is complete , The browser event process sends the bound callback function to the task queue )

Event loop

Event loop It can be understood as a task or work , The main function is to detect the task queue and the execution stack generated by the main thread , Once the code in the execution stack is executed , The callback function is automatically extracted from the task queue .

Event loop It can also be understood as a mechanism or operation mode , Can be : The main thread assigns asynchronous tasks to asynchronous operation threads , After the asynchronous operation thread completes the task, it allocates the callback function to the task queue , The task queue holds the callback function , Then, when the main thread finishes executing the code, it will extract the callback function in the task queue . This cycle is called Event loop

Everyone has his own way of understanding and thinking , No matter how you understand memory , My article makes students understand Event loop How it works .


In our actual development, we may not need to understand Evnet loop The impact on asynchronous operations , But after we have learned and understood it to a certain extent , We'll do a script with asynchronous operations / There is a clearer understanding of the execution of functions , More clearly it is in the implementation of what kind of position and state

本文为[Partner of crab Castle King]所创,转载请带上原文链接,感谢

  1. CSS layout
  2. Application scenario explanation of Vue dynamic component
  3. Redux learning notes 04 -- using multiple reducers to manage data
  4. After three months of typescript writing, what have I learned?
  5. Node family - what is a callback?
  6. React -- a simple implementation of render & create element
  7. JS learning simple usage of jquery
  8. Seamless love
  9. 小白前端入门笔记(12),设置哑链接
  10. Small white front-end entry notes (12), set dumb links
  11. Vue2. X opens composition API and TSX
  12. Interview record and thinking of social recruitment for one and a half years (Alibaba, Tencent, baidu offer)
  13. Flex learning notes
  14. The most essential closure article in the eastern hemisphere
  15. 2021-05-03 hot news
  16. Sword finger offer -- reverse order pair in array (JS Implementation)
  17. Working process of scaffold
  18. Use decorator mode to strengthen your fetch
  19. [JS] scope (Introduction)
  20. Employment information statistics network (interface document)
  21. Analysis of MVC
  22. [middle stage] please stay and join me in the backstage
  23. Understanding front end garbage collection
  24. [continuous update] front end special style implementation
  25. Flutter product analysis and package reduction scheme
  26. XPath positioning
  27. 前端开发css中的flex布局的使用
  28. The use of flex layout in front end development CSS
  29. JQuery核心函数和静态方法
  30. JQuery core functions and static methods
  31. Node family - understanding of blocking and non blocking
  32. 热点微前端Microfrontend的讨论:谷歌AdWords是真实的微前端
  33. Vue source code analysis (2) initproxy initialization proxy
  34. What's TM called react diff
  35. Summary of common front end data structure
  36. Useeffect in hooks
  37. [encapsulation 02 design pattern] Command pattern, share meta pattern, combination pattern, proxy pattern, strategy pattern
  38. Front end notes: virtual Dom and diff of vue2. X
  39. The best code scanning plug-in of flutter
  40. The simplest plug-in for rights management of flutter
  41. 21. Object oriented foundation "problems and solutions of object traversal"
  42. Discussion on hot micro front end: Google AdWords is a real micro front end
  43. Usecallback and usememo for real performance optimization
  44. 【前端圭臬】十一:从规范看 JavaScript 执行上下文(下)
  45. [front end standard] 11: Javascript execution context from the perspective of specification (2)
  46. Hexagonal六角形架构ReactJS的实现方式 - Janos Pasztor
  47. Transaction of spring's reactive / imperative relational database
  48. The implementation of hexagonal hexagonal reactjs Janos pasztor
  49. HTTP状态码:402 Payment Required需要付款 - mozilla
  50. HTTP status code: 402 payment required - Mozilla
  51. Factory mode, constructor mode and prototype mode
  52. Build the scaffold of react project from scratch (Series 1: encapsulating a request method with cache function based on Axios)
  53. Cocos Quick Start Guide
  54. Comparison of three default configurations of webpack5 modes
  55. A case study of the combination of flutter WebView and Vue
  56. CSS: BFC and IFC
  57. A common error report and solution in Vue combat
  58. JS: this point
  59. JS: prototype chain
  60. JavaScript series -- promise, generator, async and await