How does stack in Javascript works for parallel function calls?

Question

I have read some articles and learnt the basic of stack in Javascript, which it operates in LIFO principles. However, most of the tutorial I can find used nested function call as an example. How will the stack operates for a parallel function call like this?

function first () { console.log(1) } function second () { console.log('expensive computation here') } function third (v) { console.log(v) } function runCallback () { first() second() third() } runCallback()

If second conducts some very expensive computation, will it block third from running? Since these functions are independent(most like to have effect by mutation outside), can I make second non-blocking without using Promise.all?

functions execute in the order they are called regardless of how expensive the computation is. Promises by themselves do not dictate execution order, although they will resolve in order from fastest to slowest, based on Asynchronicity. — StackSlave
– StackSlave, Commented Jan 11, 2021 at 4:58

CertainPerformance · Accepted Answer · 2021-01-11 04:26:07Z

If second conducts some very expensive computation, will it block third from running?

Yes, if second's computations are synchronous. Once a function is called, all synchronous code inside that function will run to completion before the function terminates. Only once the function terminates will control flow be yielded to the caller - which, in this case, will then call third().

can I make second non-blocking without using Promise.all?

One option is to delay second's run until all subsequent synchronous functions are complete, by putting it on the microtask queue, eg:

Promise.resolve().then(second); third();

Or with an instant setTimeout (macrotask):

setTimeout(second); third();

True parallelism, where second runs at the same time as third would only be possible with special environment features like web workers or a child process in Node.

venkatesh pogartha · Accepted Answer · 2021-01-11 04:57:54Z

Web worker is an alternative for doing jobs in parallel.

If you want to know more about it. Web workers - How do they work?

Nguyễn Văn Phong · Accepted Answer · 2021-01-11 07:29:18Z

can I make second non-blocking without using Promise.all?

Of course, you should run the less expensive code as fast as possible. So by somehow, you add the expensive computation code into another thread (web browser API or node api, for example).

Due to the code moved on api, whenever it's done, it'll move to the queue then is executed when the call stack is empty (after third() method)

function first () { console.log(1) } function second () { console.log('expensive computation here') } function third (v) { console.log(v) } function runCallback () { first() setTimeout(second, 2000); //or using Promise static method like this: Promise.resolve().then(second); third("any value"); } runCallback()

Thanks @Philip Roberts with great tool to visualize JS runtime.

Real time demo here

Thank you for your answer. What is the name of that website? It seems very useful to help me understand the stack.

Collectives™ on Stack Overflow

How does stack in Javascript works for parallel function calls?

3 Answers 3

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Linked

Related