Shulou(Shulou.com)06/02 Report--

Nodejs how to cycle browser events, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Chapter 1: introduction to the event cycle:

Event loop in the browser:

In order to coordinate events (event), user interaction (user interaction), scripts (script), rendering (rendering), network (networking), etc., user agents (user agent) must use event loops (event loops).

Events: PostMessage (multiple page communication), MutationObserver (dom snooping), etc.

User interaction: click,onScroll, etc.

Rendering: parsing dom,css, etc.

Cripts: executing script

Event Loop in nodejs

Event loops allow Node.js to perform non-blocking Igambo operations, although JavaScript is single-threaded, and by offloading operations to the system kernel as much as possible, since most modern kernels are multithreaded, they can handle multiple operations performed in the background. When one of the operations is completed, the kernel tells Nodejs so that the corresponding callback can be added to the polling queue for final execution.

Event: EventEmitter

Non-blocking Ithumb O: network requests, file reads and writes, etc.

Cripts: js executes script

The nature of the event cycle

In a browser or nodejs environment, the way the runtime schedules js scripts is called an event loop

SetTimeout () = > {console.log ('setTimeout')}, 0) Promise.resolve (). Then () = > {console.log (' promise')}) console.log ('main') / / main promise setTimeout Chapter 2: browser event Loop

Why is javascript single-threaded?

The role of browser js is to manipulate DOM, which determines that it can only be single-threaded, otherwise it will bring very complex synchronization problems. For example, if the javascript has two threads at the same time, one thread adds content to a DOM node and the other thread deletes the node, the browser does not know which thread is the primary thread.

Task queue

Single threading means that all tasks need to be queued, if it is OK because the task cpu has a large amount of computation, but the cpu operation is idle. So js is designed as an asynchronous language that doesn't wait needlessly.

Tasks can be divided into two types, one is synchronous, the other is asynchronous.

All synchronization tasks are executed on the main thread, forming an execution stack.

In addition to the main thread, there is a task queue. As long as the asynchronous task has a run result, place an event in the task queue.

Once all the synchronization tasks in the execution stack have been executed, the system reads the task queue to see what events are in it. Those corresponding asynchronous tasks then end the waiting state, enter the execution stack, and begin execution.

The main thread keeps repeating the third step above

The main thread reads events from the task queue, and this process is cyclic, so the whole running mechanism is also called Event Loop (event loop).

Macro task and micro task

In addition to synchronous and asynchronous tasks in a broad sense, tasks in a single thread of javaScript can be subdivided into macro tasks and micro tasks.

Macrotask (Macro Task): script (overall Code), setTimeout, setInterval, setImmediate, Imax O, UI rendering

Microtask (micro task): process.nextTick, Promise, Object.observe, MutationObserver 1. Macro tasks enter the main thread, and micro-tasks are collected to join the micro-task queue during execution. two。 After the macro task is completed, the task in the micro task is executed immediately. During the execution of the micro task, the macro task will be collected again and join the macro task queue 3. Execute 1 and 2 repeatedly.

Event loop: each round of macro and micro tasks is called a loop of events

High-frequency interview questions

An event loop executes a macro task and all micro tasks

SetTimeout (() = > {console.log ('setTimeout') setTimeout () = > {console.log (' setTimeout2')}, 0)}, 0) Promise.resolve (). Then () = > {console.log ('Promise') Promise.resolve (). Then () = > {console.log (' Promise2')}) console.log ('main') / / main promise promise2 setTimeout

The task queue must be executed in the first-in-first-out order, and only one red task can be performed at a time!

SetTimeout (()) = > {/ / two setTimeout ('setTimeout') Promise.resolve (). Then () = > {console.log (' promise')})}, 0) Promise.resolve (). Then () = > {console.log ('promise2') setTimeout () = > {console.log (' setTimeout2')} 0)}) console.log ('main') / / main promise2 setTimeout promise setTimeout2new Promise ((res, rej) = > {console.log (1) res ()}). Then () = > {console.log (2) new Promise ((res) Rej) = > {console.log (3) res ()}). Then () = > {console.log (4)}). Then () = > {console.log (5)}). Then (() = > {console.log (6)})}). Then () = > {console.log (7)}). Then () = > {console. Log (8)}) / / 1 2 3 4 7 5 8 6 finish reading the above Have you mastered how to loop browser events in nodejs? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.