1. The origin of js

Brendan Eich, founder of JSCopy the code
  1. It mainly solved some verification processing when the form was submitted at that time. Because the bandwidth was relatively small in that year, it would be a waste of resources if repeated submission was not verified.
  2. Js serves the browser, and the browser uniformly schedules JS

Js document: does not include the Event loop HTML document: contains the Event loop instead

Event loop description: the mechanism used by the browser to coordinate user interaction including: mouse, keyboard, JS, rendering, network, etc. Js does not have permission to access the system’s time, it is all passive and dependent on the browser: js does not have event loops, it is the browser’s event loops – controlling the interaction of different event sources.

2. The asynchronous

Most event sources are asynchronous and queued - queued execution.Copy the code

2.1. Two types of queues

  1. External queue: External is all events, external only executes once at a time, the serial execution of the browser’s various events of the queue user interaction (mouse, keyboard) DOM operation (page rendering) timer (setTimeout) network request (Ajax) historyAPI
  2. Internal queue The task queue that was executed inside JS promise mutaionObsve Object. observe has been abandoned

2.2. Execution process

1. An external event 2. Browser event 3.Copy the code

Note: Each <script></script> is an external queue of event sources, if there are multiple external queues executing on demandCopy the code

2.3. Analyze the relationship between external queue and internal queue from js execution stack

  1. Each execution on the left side of the stack adds macrotask and microtask methods to the execution stack.

  2. How to add: the first macro is added first, then all microtasks are added.

  3. Execution process: macro tasks placed on the execution stack are executed before all microtasks are executed

    Note: The console.log() output at the root of the code is also a macro taskCopy the code

3. Event loop in Node.js

Principle 1.

In Node.js, js is attached to libuv, cancles all external input (such as keyboard and mouse), keeps external queue and internal queue, and adds I/OCopy the code

2. Difference from browser

  1. Event loop process without HTML rendering. That leaves the external queue and the internal queue.
  2. External queues have different event sources. Node.js has lost the mouse and other peripherals, but has added files and IO.
  3. The only events left in the internal queue are the Promise’s THEN and catch.

3. Different versions – Implementation differences

Node.js 10 version 11 or earlier an eventLoop event is executed after all macro events of the same type are executed

Node.js version 12 eventLoop events are browser consistent, executing only one macro event at a time and clearing all microevents under the macro

Node.js 10 eventLoop event is executed after all macro events of the same type are executed

Results 1,5,2,6,3,7,4,8

Node.js version 12 eventLoop events are browser consistent, executing only one macro event at a time and clearing all microevents under the macro

Results 1,2,5,6,3,4,2,8

4.新方法 setImmediate

SetImmediate is a unique method added to Node.js

# Fix the setTimeOut accuracy problemSetTimeout (()=> {},0) setTimeout(()=> {},0)Copy the code