Event Loop Personal Understanding

The JavaScript engine is a single-threaded procedure that performs synchronous operations down sequentially and executes an asynchronous operation using the event loop model.

When the JS engine thread encounters an asynchronous operation, it gives the asynchronous operation to the corresponding observer,

Asynchronous operations include:

Dom Event Click,mousedown, etc.
Timer Settimeout,setinterval
IO network io, file io, other io (localstorage,cookie), IO operations will be handed to the corresponding thread pool to execute

The Observer observes the state of the asynchronous operation and, when the asynchronous operation completes, encapsulates the corresponding asynchronous information (including callback, etc.) into an event-push event queue.

The JS engine thread continuously polls the event queue, reads the event according to the FIFO principle, if there is an event, takes out, executes its callback, and executes a callback process called a loop (Tick),

Execution completes and enters the next loop (Nexttick).

If the event queue is empty, the JS engine executes an empty loop.

In the browser, the JS engine and the GUI engine is mutually exclusive, that is, the JS engine will block the UI rendering, when the JS synchronization continues to execute, the UI will not be updated, will be stuck in the state.

Event Loop Personal Understanding