Home > Article > Web Front-end > Detailed introduction to event loop (EventLoop) in node.js (with code)
This article brings you a detailed introduction to the event loop (EventLoop) in js (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Before learning eventloop, we need to review the single thread and asynchronousness of js.
Although js is single-threaded, it is processed accordingly in the browser and Node. Such as web workers (worker threads) in browsers and child_process (child processes) in Node. Their emergence has facilitated the decomposition of large amounts of computation.
When the process starts, Node will create a tick loop. Each tick loop uses the internal observer to see if there are events that need to be processed, and if so, take them out. The event and its related callback function are executed. After execution, it enters the next loop. If there is no more, it exits the process.
Put asynchronous events in the worker thread in the browser to avoid blocking the rendering of the main thread UI
console.log('进程开始') const ajax = new XMLHttpRequest() ajax.addEventListener('load', () => { console.log('load') }) ajax.addEventListener('loadend', () => { if (ajax.readyState == 4 && ajax.status == 200) { console.log('ajax success') } else { console.log('ajax success') } }) ajax.open('get', 'http://localhost/study/html/vue.js') ajax.send() setTimeout(() => { console.log('setTimeout') }, 300) fetch('http://localhost/study/html/demo.json',{ headers: { 'content-type': 'application/json' } }).then(res => { console.log('fetch') }) let i = 0 while(i < 10000) { i++ } console.log(i) console.log('进程结束')
It can be seen from the results that the three types of asynchronous processing do not block the execution of the main thread code, and ajax, fetch, and setTimeout execute callback functions according to the order in which the code processing ends.
The event loop in Node is executed according to the priority of the observer, process.nextTick -> setTimeout -> setImmediate# in the same loop ##
setTimeout(() => { console.log('setTimeout') }, 0) setImmediate(() => { console.log('setImmediate1') process.nextTick(() => { console.log('setImmediate1 插入nextTick') }) }) setImmediate(() => { console.log('setImmediate2') }) process.nextTick(() => { setTimeout(() => { console.log('nextTick1 setTimeout') }, 100) console.log('nextTick1') }) process.nextTick(() => { console.log('nextTick2') }) console.log('正常执行')Summary
Details on the JavaScript event loop mechanism - Lecture 2
In-depth understanding of Node. js event loop and callback function
The above is the detailed content of Detailed introduction to event loop (EventLoop) in node.js (with code). For more information, please follow other related articles on the PHP Chinese website!