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

This article is about why Promise.resolve (). Then (callback) is faster than setTimeout (callback,0) in web. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

I. experiment

Let's try an experiment. What executes faster: the promise of immediate resolution or immediate timeout (that is, 0 millisecond timeout)?

Promise.resolve (1) .then (function resolve () {

Console.log ('Resolvedwaters')

});

SetTimeout (function timeout () {

Console.log ('Timed outposts')

}, 0)

/ / logs' Resolvedwaters'

/ / logs' Timed outbound'

Promise.resolve (1) is a static function that returns a promise of immediate resolution. SetTimeout (callback, 0) performs a callback with a delay of 0 milliseconds.

Open the demo and check the console. You will notice 'Resolvedwaters' The first thing to record is, then the 'Timeout completed records'. The promise of immediate resolution is faster than immediate timeout.

The commitment process may be faster because Promise.resolve (true). Then (...) In setTimeout (..., 0)? Fair enough.

Let's change the conditions of the experiment a little bit. SetTimeout (..., 0) calls:

SetTimeout (function timeout () {

Console.log ('Timed outposts')

}, 0)

Promise.resolve (1) .then (function resolve () {

Console.log ('Resolvedwaters')

});

/ / logs' Resolvedwaters'

/ / logs' Timed outbound'

Open the demo and view the console. Um... The result is the same!

SetTimeout (..., 0) was previously called Promise.resolve (true). Then (...). But, 'Resolvedbirds' It's still recorded in 'Timed outposts.

Experiments have shown that the promise of immediate resolution is dealt with before the immediate timeout. The biggest problem is. Why?

two。 Event cycle

Questions related to asynchronous JavaScript can be answered by investigating the event loop. Let's review the main components of how asynchronous JavaScript works.

Note: if you are not familiar with the event loop, I recommend that you watch this video before reading any further.

The call stack is a LIFO (last-in, first-out) structure that stores the execution context created during code execution. Simply put, the call stack executes the function.

Web API is the place where asynchronous operations (get requests, promises, timers) and their callbacks are waiting to be completed.

A task queue (also known as a macro task) is a FIFO (first-in, first-out) structure that holds callbacks to asynchronous operations that are ready to be performed. For example, the timed-out callback setTimeout ()-- ready for execution-- is queued for tasks.

A job queue (also known as a microtask) is a FIFO (first-in, first-out) structure that holds commitment callbacks ready for execution. For example, a resolution or rejection callback of a fulfilled commitment is queued in the job queue.

Finally, the event loop permanently monitors whether the call stack is empty. If the call stack is empty, the event loop looks at the job queue or task queue and delists any callbacks ready for execution to the call stack.

3. Job queue vs task queue

Let's look at the experiment from the point of view of the event cycle. I will analyze the code execution step by step.

A) the call stack executes setTimeout (..., 0) and schedules a timer. The timeout () callback is stored in Web API:

SetTimeout (function timeout () {

Console.log ('Timed outposts')

}, 0)

Promise.resolve (1) .then (function resolve () {

Console.log ('Resolvedwaters')

});

B) the call stack executes Promise.resolve (true). Then (resolve) and arranges a committed solution. The resolved () callback is stored in Web API:

SetTimeout (function timeout () {

Console.log ('Timed outposts')

}, 0)

Promise.resolve (1) .then (function resolve () {

Console.log ('Resolvedwaters')

});

C) promise to solve the problem immediately and the timer expires immediately. Therefore, the timer callback timeout () is queued for tasks, and the promise callback resolve () is queued for jobs:

D) now comes the interesting part: event loops take precedence over task dequeuing jobs. The event loop resolve () takes the commitment callback from the job queue and puts it on the call stack. Then the call stack executes the commitment callback resolve ():

SetTimeout (function timeout () {

Console.log ('Timed outposts')

}, 0)

Promise.resolve (1) .then (function resolve () {

Console.log ('Resolvedwaters')

});

'Resolvedbirds' Record it to the console.

E) finally, the event loop dequeues the timer callback timeout () from the task queue to the call stack. Then the call stack executes the timer callback timeout ():

SetTimeout (function timeout () {

Console.log ('Timed outposts')

}, 0)

Promise.resolve (1) .then (function resolve () {

Console.log ('Resolvedwaters')

});

'Timed outposts' Record it to the console.

The call stack is empty. Script execution completed.

4. Summary

Why is the promise of immediate resolution processed faster than immediate timers?

Jobs in the job queue (callbacks that store fulfilled promises) take precedence over tasks in the task queue (storage timeout setTimeout () callback) because of the event loop priority.

Thank you for reading! This is the end of the article on why Promise.resolve (). Then (callback) is faster than setTimeout (callback,0) in web. I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.