Welcome to Jsliang’s documentation library — a repository of lifetime updates — for more technical, financial, and fitness articles:Github.com/LiangJunron…

A directory

What’s the difference between a free front end and a salted fish

directory
A directory
The preface
3 the Event Loop
Four Browser Event Loop
 4.1 example 1
 4.2 sample 2
 4.3 sample 3
 4.4 summary
Five Node. Js Event Loop
 5.1 setTimeout & setImmediate
 5.2 process. NextTick ()
 5.3 example 1
 5.4 sample 2
 5.5 summary
Six summarize
Vii References

The preface

Returns the directory

Good morning, good afternoon, good afternoon, good evening and good morning

In your daily work, have you ever come across the question:

  • Puzzle 1: Why doesn’t this code follow my instructions? Why not output1 2 3?
for (var i = 0; i < 3; i++) {
  setTimeout((a)= > {
    console.log(i);
  }, 1000);
}
// console:
/ / 3
/ / 3
/ / 3
Copy the code
  • Doubt 2: Why does this code not follow my instructions? Why not outputjsliang?
let name;

setTimeout((a)= > {
  name = 'Liang Junrong';
  console.log(name);
}, 1000);

if (name) {
  name = 'jsliang';
  console.log(name);
}
// console: 'Liang Junrong'
Copy the code

It’s a long story.

Since it’s a long story, Jsliang can only try to make it short:

  • This article starts from the origin of the Event Loop, by exploring the browser environment Event Loop and node.js environment Event Loop, to solve the confusion caused by work, expand your interview knowledge.

In this way, we can also divide the article:

  • Chapter 3 Event Loop: Explain the cause of Event Loop and demonstrate the code.
  • Chapter 4 browser Event Loop: Answer questions about work and expand essential interview knowledge.
  • Chapter 5 node.js Event Loop: Further explore the differences between Event loops in browsers and Node.js.

OK, Let ‘s go!

3 the Event Loop

Returns the directory

  • Q: What is an Event Loop and why is it needed?

A:

First, we need to know that JavaScript is single-threaded.

Single-threaded means that all tasks need to be queued until the previous task finishes before the next task can be executed.

Assuming that Jsliang, like JavaScript, can only do one thing at a time, this would look something like this.

The main thread reads execution events from the “task queue” and repeats the process repeatedly, which is called an Event Loop.

However, if the first task takes a long time and the second task has to wait forever, then we definitely have to do something special for this situation, after all, many times we don’t fully expect it to perform this way.

So in order to coordinate events, user interaction, scripts, rendering, networking, etc., user agents must use Event loops.

In this way, we can understand the execution process of the browser Event Loop and node.js Event Loop.

Through their own understanding, to deal with some of the more intractable problems.

To impress your friends, look at the picture below:

In jsliang everyday, “beaten by Bean mom” is mandatory.

Of course, the order of being beaten is not necessarily in the back, may be more than two times, after “sleep” is “beanie mom beat”.

The browser Event Loop and node.js Event Loop are used to create the browser Event Loop.

Wait, you mentioned browser Event loops and Node.js Event loops. Why are they all about JavaScript?

  • Simply put: your pages are displayed in the browser, and your data is processed in the background (treat Node.js as PHP, Java, etc.). Is there any difference between the two? !

You said it like you never said it. You didn’t explain why it happened!

Ok, be a little more specific:

  • Node.js: Node.js Event Loop is based on libuv. Libuv already implements the Event Loop.
  • Browser: The browser’s Event Loop is based on the HTML5 specification. However, the HTML5 specification only defines the model of Event Loop in the browser, and the specific implementation is left to the browser manufacturer.

Libuv is a multi-platform support library for asynchronous I/O. It was originally developed for Node.js and is now used by Luvit, Julia, Pyuv, and other frameworks. Github-libuv repository

Suddenly, it is not the same ah!

Therefore, we need to distinguish these two Event loops. They are different things

Finally, let’s solve the first two questions. Why is it like this? Is there any way to solve it?

  • Puzzle 1: Why doesn’t this code follow my instructions? Why not output1 2 3?
for (var i = 0; i < 3; i++) {
  setTimeout((a)= > {
    console.log(i);
  }, 1000);
}
// console:
/ / 3
/ / 3
/ / 3
Copy the code

“Event Loop” is an Event Loop, and “var let const” is an Event Loop.

Jsliang recorded a GIF to help you explore this mechanism:

The software is VS Code and the debugging mode is Node.js

Please take a closer look at the GIF:

  1. In the implementationforWhen we iterate, it performs the sum firstsetTimeoutAt the same level ofconsole, and then go down tosetTimeoutTo skip (to a position)setTimeout, printed in turn0, 1, 2.
  2. Step 1 Skip three timessetTimeoutStart executing, but at this pointiValue of, after the precedingi++After, becomes3(forAfter stopping the loop,iIs already3A). So, I printed it in turn3 3 3.

That is to say, the normal for first, and then encounter setTimeout, setTimeout is placed in a different dimension, and finally after the for, the setTimeout in the different dimension is released, and the numbers are output in turn.

This execution mechanism, is the influence of Event Loop, suddenly realize whether ~

The neat thing about this question is that it not only asks you about the Event Loop part, it also asks you to distinguish between ES6 lets and ES5 var, because one of the solutions is to use ES6 lets.

Before solving this problem, consider the following output:

for (var i = 0; i < 3; i++) {

}
for (let j = 0; j < 3; j++) {

}
console.log(i);
console.log(j);
Copy the code

If you know anything about ES6, you can probably guess:

3
ReferenceError: j is not defined
Copy the code

Is there any idea, then let’s look at the following solutions, and then summarize:

for (let i = 0; i < 3; i++) {
  setTimeout((a)= > {
    console.log(i);
  }, 1000);
}
/ / the console:
/ / 0
/ / 1
/ / 2
Copy the code

Yes, after changing var I to let I, the output is 0, 1, 2.

Why is that? The simple answer is:

let 在 forThe unique scope block formed in the currentiIt only works in this cycle, and thensetTimeoutI’m going to find the closest one to this roundi, thus making the correct output.

And the way we define it with var, it pollutes the global variable, so in the for layer, you can see the value of I.

Of course, at this point, you may not be clear about the more detailed distinction, or the interviewer further asked you var let const distinction, how can you better answer?

Take a look at Ruan Yifeng’s ES6 document: es6.ruanyifeng.com/#docs/let

Here I will not tremble, I will arrange the content of ES6 into my document library, welcome to continue to pay attention to jsliang document library: github.com/LiangJunron…

  • Doubt 2: Why does this code not follow my instructions? Why not outputLiang Junrong?
let name;

setTimeout((a)= > {
  name = 'jsliang';
  console.log(name);
}, 1000);

if (name) {
  name = 'Liang Junrong';
  console.log(name);
}
// console: 'jsliang'
Copy the code

When you understand the cause of doubt one, doubt two will be solved.

We wanted JavaScript to be written in the order we wanted it to be written, but it didn’t because of the Event Loop.

When JavaScript encounters a setTimeout, it seals it into a different dimension, waiting for all normal statements (if, for…). After the execution is complete, it is unsealed from the other dimension and the final result is output.

Well, this is interesting. What are the different dimensions of browsers and node.js? Let’s look down.

Four Browser Event Loop

Returns the directory

Before we get into the browser Event Loop, we need to understand how JavaScript works:

  1. All synchronization tasks are executed on the main thread, forming an “execution Context stack.”
  2. Outside the main thread, there is a “task queue” in which asynchronous tasks are placed if they are encountered during the main process.
  3. Once all synchronization tasks in the execution stack are completed, the system reads the Task queue to see what events exist in it. Those corresponding asynchronous tasks end the wait state, enter the execution stack, and begin execution.
  4. The main thread repeats the above three steps.

Asynchronous tasks in JavaScript are divided into two types:

  • MacroTasks:script(Overall code),setTimeout,setInterval,XMLHttpRequest.prototype.onload,I/O, UI rendering
  • Microtasks:Promise,MutationObserver

This is not easy to understand, let’s picture:

The picture is large, if you are a small friend of the public account, you can click [Read the text] to see the full picture

Ok, if you can’t see it clearly, let’s explain it through the code. After all, the above belongs to Jsliang’s personal understanding, which is summarized from more than 15 articles and my own observation of the code operation.

4.1 example 1

Returns the directory

So, code ~

Example 1

/ / position 1
setTimeout(function () {
  console.log('timeout1');
}, 1000);

/ / position 2
console.log('start');

/ / position 3
Promise.resolve().then(function () {
  / / position 5
  console.log('promise1');
  / / position 6
  Promise.resolve().then(function () {
    console.log('promise2');
  });
  / / position 7
  setTimeout(function () {
    / / position 8
    Promise.resolve().then(function () {
      console.log('promise3');
    });
    9 / / position
    console.log('timeout2')},0);
});

/ / position 4
console.log('done');
Copy the code

Question: What is the output of the code above?

Answer:

This is a classic interview question type, so don’t panic, first take our above points, distinguish between macro tasks and micro tasks:

  • MacroTasks:script(Overall code),setTimeout,setInterval,XMLHttpRequest.prototype.onload,I/O, UI rendering
  • Microtasks:Promise,MutationObserver

OK, start the process:

If you feel that the text is not easy to understand, please scroll down, there is a GIF demonstration!!

  1. So the first thing I run into isscript(overall code), first look at [position 1], belongs to the macro tasksetTimeoutSo mark it and come back later.
  2. And then you hit position 2, which isscriptUnencumbered code under (whole code) can be executed directly.
  3. If I hit position 3 again, it’s nowscript(overall code), so let’s make a mark, after all the code in the file, execute the micro task first, then execute the macro task.
  4. And then finally I hit position 4, which isscriptUnencumbered code under (whole code) can be executed directly.

Thus, for the first step, we print start at position 2 and done at position 4.

Let’s go on:

  1. So we went through the first code up here, and now we’re going to do it firstscriptMicrotasks under (overall code), i.e. [Location 3]
    1. First hit [position 5], this is unblocked code, directly executed.
    2. If you encounter [position 6] again, this is a microtask, mark it and execute it first after all the code in [position 3] is executed.
    3. Finally, it hits position 7, which is the macro task, and throws it into the task queue to see which one goes first, position 1 or position 7.
  2. After walking through [position 3], there are still micro-tasks [position 6], so execute [position 6] to print out.

At this point, we have gone through the script and all the microtasks below.

At this point, we say, both position 1 and position 7 have been dropped into the task queue. Does position 1 go first?

The answer is: no.

Similarly, when jsliang is tested, it is found that their output results have their own process in each environment. Sometimes, they go [position 7] first and then [position 1]. Sometimes you go first to position 1 and then to position 7.

Of course, if you specify to print the above code in the Chrome console, it will be in position 7, then position 1 ~

  • Point: Don’t make assumptions about what code will do, it’s better to just run it live!
  1. Go first. When [position 8] is encountered, add it to the microtask of [position 7]. When all the codes of [position 7] are executed, the microtask will be carried out first. Hit [position 9], this is unblocking code, just print it.
  2. Perform microtask [position 8] of [position 7] and output the corresponding text.
  3. Finally go to [position 1] and output the corresponding text.

So the answer is:

start
done
promise1
promise2
timeout2
promise3
timeout1
Copy the code

Did you guess right?

Can’t look at the GIF to deepen the impression:

4.2 sample 2

Returns the directory

In the above, Jsliang spent a lot of saliva, talked about some complicated and redundant steps, so the following example, please friends to guess the first set, come to a conclusion and then look at the answer and debug GIF~

Example 2

console.log("script start");

setTimeout(function() {
  console.log("setTimeout---0");
}, 0);

setTimeout(function() {
  console.log("setTimeout---200");
  setTimeout(function() {
    console.log("inner-setTimeout---0");
  });
  Promise.resolve().then(function() {
    console.log("promise5");
  });
}, 200);

Promise.resolve()
  .then(function() {
    console.log("promise1");
  })
  .then(function() {
    console.log("promise2");
  });
Promise.resolve().then(function() {
  console.log("promise3");
});
console.log("script end");
Copy the code
  • Output result:
script start
script end
promise1
promise3
promise2
setTimeout---0
setTimeout---200
promise5
inner-setTimeout---0
Copy the code
  • GIF demo:

4.3 sample 3

Returns the directory

One last example:

Example 3

setTimeout(function() {
  console.log(4);
}, 0);

const promise = new Promise(function executor(resolve) {
  console.log(1);
  for (var i = 0; i < 10000; i++) {
    i == 9999 && resolve();
  }
  console.log(2);
}).then(function() {
  console.log(5);
});

console.log(3);
Copy the code
  • Output result:
One, two, three, five, fourCopy the code

If you don’t always use promises, you might wonder why not: 3, 1, 2, 5, 4?

Manual funny, don’t ask, ask is to explore further.

  • Jsliang’s Promise Exploration: github.com/LiangJunron…

Of course, we haven’t updated all the results yet. If you have friends, it will speed up the process. Please leave a message or chat privately

4.4 summary

Returns the directory

This gives us an overview of the browser’s Event Loop with three examples.

Of course, in practice, the code is much more than that, and sometimes, the interviewer will give you interview questions, you will be surprised.

So, here we nonsense two points:

  1. You can understand the general execution of macro and micro tasks, such as walking firstif... else..., and then walkPromise… However, detailed to eachpointWrite it all down. It’s not recommended. My Lord, The Times are advancing, remember that it is better to die than to try in business practice and acquire the latest knowledge.
  2. The Event Loop of the browser is different from the Event Loop of Node.js. If one day XX small program has its own Event Loop, do you want to remember them all?

Run into a problem don’t panic, programmer, toss about right ~

Five Node. Js Event Loop

Returns the directory

So, let’s make fun of node.js Event Loop.

To be honest, after reading node.js official website and the Event Loop explained by the big guys, IT reminds me of Vue, React and wechat mini program’s [life cycle]. Then it reminds me that our life seems to run periodically and eventfully like a program that has been written to death, which is very hateful, haha ~

Node.js Event Loop is based on Libuv. Libuv already implements the Event Loop.

So how does it work? Look at the picture:

┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ ┌ ─ > │ timers │ │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ pending Callbacks │ │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ idle, Prepare │ │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ incoming: │ │ │ poll │ < ─ ─ ─ ─ ─ ┤ connections, │ │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │ data, Etc. │ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │ │ check │ │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ └ ─ ─ ┤ close callbacks │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘Copy the code

The six stages are described on the website as follows:

  • Timers: This phase has been executedsetTimeout() 和 setInterval()The scheduling callback function of.
  • Pending callbacks: I/O callbacks that are deferred until the next iteration of the loop.
  • Idle, prepare: used only in the system.
  • Poll: Retrieves new I/O events; Perform I/ O-related callbacks (in almost all cases, except for closed callback functions, those made by timers andsetImmediate()Beyond scheduling), the rest of the caseNodeWill block here in due course.
  • Check:setImmediate()This is where the callback function is executed.
  • Close callbacks: Some closed callback functions such as:socket.on('close', ...).

Of course, jsliang does not want to gild the lily here. It is recommended that you read the description of each stage of Event Loop on the official website to use it in your work.

  • Event Loop: nodejs.org/zh-cn/docs/…

Node.js is constantly being explored and updated, so just like jsliang’s summary in the browser Event Loop: Don’t limit yourself. Keep up with The Times.

Node. Js v9.5.0 Event Loop

┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ ┌ ─ > │ timers │ │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ I/O callbacks │ │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ idle, Prepare │ │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ incoming: │ │ │ poll │ < ─ ─ ─ ─ ─ ┤ connections, │ │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │ data, Etc. │ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │ │ check │ │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┬ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┴ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ ├ ──┤ close callbacks ────── our r companyCopy the code

However, there are times when life demands that the front-end interviewer nudge you with setTimeout & setImmediate and process.Nexttice ().

5.1 setTimeout & setImmediate

Returns the directory

  • setTimeout: As we all know, this is a timer specifiednExecute the contents of the timer after milliseconds.
  • setImmediateNode.js discovery is usedsetTimeout 和 setIntervalThere were a few minor drawbacks, so I designed asetImmediate, which is designed to execute the script once the current polling phase is complete.

Of course, it is useless to talk about it.

index.js

setTimeout((a)= > {
  console.log('timeout');
}, 0);

setImmediate((a)= > {
  console.log('immediate');
});
Copy the code

Guess what happens when you execute the node index.js command in VS Code?

Result 1

immediate
timeout
Copy the code

Conclusion 2

timeout
immediate
Copy the code

In fact, there are two endings. It seems to be happy ending, but some friends may feel upset.

As explained on the official website:

  • The order in which timers are executed will vary depending on the context in which they are invoked.
  • If both are called from within the main module, the timer is constrained by process performance (which may be affected by other running applications on the computer).
  • If you call these two functions in an I/O loop,setImmediateAlways limited calls.
const fs = require('fs');

fs.readFile(__filename, () => {
  setTimeout((a)= > {
    console.log('timeout');
  }, 0);
  setImmediate((a)= > {
    console.log('immediate');
  });
});
Copy the code

The official explanation is very clever, but whether you understand it or not, I think it’s kind of bullshit.

One final official summary:

  • usesetImmediate()Relative to thesetTimeoutThe main advantage is: ifsetImmediate()Is scheduled in the I/O cycle, so it will be executed before any timer, regardless of how many timers there are.

enm… I’ll take a closer look when I use Node.js, but for now, I’ll take a look.

5.2 process. NextTick ()

Returns the directory

NextTick is special in that it holds its own queue.

It is also independent of the Event Loop, which empties the nextTick queue at the end of any phase.

Also note that process.nexttick () takes precedence over other microtasks.

Of course, if you’re interested, you can explore the source code further, or watch the big guys explore the source code:

  • Don’t Confuse NodeJS with Event Loops in browsers
  • What’s the difference between browser and Node Event Loops?

No use, no say, as a Node.js dish chicken, here will not comment on the analysis.

5.3 example 1

Returns the directory

To start with, let’s see how the Node.js Event Loop is different:

Example 1

setTimeout((a)= > {
  console.log("timer1");
  Promise.resolve().then(function() {
    console.log("promise1");
  });
});

setTimeout((a)= > {
  console.log("timer2");
  Promise.resolve().then(function() {
    console.log("promise2");
  });
});
Copy the code

If you remember the browser Event Loop explained above, you might write the answer as:

The browser Event Loop outputs:

timer1
promise1
timer2
promise2
Copy the code

Yes, you’re right. That’s the Event Loop in the browser. When it comes to Node.js, it’s different:

Node.js Event Loop outputs:

timer1
timer2
promise1
promise2
Copy the code

Try to embrace it!

Then read aloud: observe and draw conclusions according to the specific environment.

5.4 sample 2

Returns the directory

Let’s look at another example:

Example 2

setTimeout(function () {
   console.log(1);
});
console.log(2);
process.nextTick((a)= > {
   console.log(3);
});
new Promise(function (resolve, rejected) {
   console.log(4);
   resolve()
}).then(res= >{
   console.log(5);
})
setImmediate(function () {
   console.log(6)})console.log('end');
Copy the code

node index.js

2
4
end
3
5
1
6
Copy the code

I’m not going to parse it here, because I’m afraid my friends who are new to Event Loop will get confused after reading the explanation.

Truth: I also dare not parse, because I am node.js dish chicken

5.5 summary

Returns the directory

In conclusion, we conclude:

There are also two types of asynchronous queues in the Node side event loop: Macrotask queue and Microtask queue.

  • Common Macrotasks:setTimeout,setInterval,setImmediate,script(overall code), I/O operations, etc.
  • Common Microtasks:process.nextTick,New Promise().then(callback)And so on.

OK, we explored the Node.js Event Loop, but since WE are not yet a Node.js engineer, we will not explore it in detail so as not to confuse it with the browser Event Loop.

Those who are interested can explore on their own

Six summarize

Returns the directory

If you’re at your wit’s end here, the same advice:

  • Regardless of whether the Event Loop is represented in a browser or node.js, it’s best to try it out in the appropriate environment.

You can’t completely guarantee that your memory is OK, so you just need to know that there is a problem and practice on it at work.

enm… So if you’re done reading a hydrology article, the only thing it does is make it easy for you to have fun with some simple topics during the interview

Ha ha, Good luck.

If you think my articles are good and want to keep following them or add my wechat friends, please go to github.com/LiangJunron… Star or wechat.

Vii References

Returns the directory

Thanks to the following big guy’s article, let me benefit a lot.

And on the basis of their creation, based on their own ideas, to integrate.

  1. Tasks, MicroTasks, Queues and Schedules – Jake
  2. “Thoroughly Understand browser Event-loop” – Liu Xiaoxi
  3. Thoroughly Understand JS Event Loop (Browser Environment) – 93
  4. Thoroughly Understand event-loop on the browser – long enough
  5. What is an Event Loop in a Browser? – caviar
  6. Understanding Event Loop (Browser vs. NodeJS) – SugerPocket
  7. “Exploring asynchronous JavaScript and Browser Update Rendering timing from the Event Loop specification” – Jingzhuo Yang
  8. Understand asynchrony in browsers with the Event Loop specification – fi3ework
  9. Don’t confuse NodeJS with Event Loops in browsers – Youth7
  10. “Browser Event Loop and Node Event Loop” – Kim Dae-gwang
  11. What’s the difference between browser and Node Event Loops? – Sailing on the waves
  12. Browser and Node Event Loops – toBeTheLight
  13. Let and Const command – Nguyen Yifeng
  14. Node.js Event Loop – node.js official website

Do not toss the front end, and what is the difference between salted fish!

Jsliang will update a LeetCode problem every day, so as to help friends consolidate the foundation of native JS, understand and learn algorithms and data structures.

Prodigal Excalibur will update the interview questions every day to drive everyone to study, keep learning and thinking every day, and make progress every day!

Scan the qr code above, pay attention to the jsliang public account (left) and prodigal Son Excalibur public account (right), let us toss together!



Jsliang document library 由 Liang JunrongusingCreative Commons Attribution – Non-commercial Use – Same way Share 4.0 International LicenseGrant permission.

Based on theGithub.com/LiangJunron…On the creation of works.

Use rights other than those authorized by this License agreement may be obtained fromCreativecommons.org/licenses/by…Obtained.