How JavaScript works in browser and node? https://itnext.io/how-javascript-works-in-browser-and-node-ab7d0d09ac2f

A visualization of JavaScript runtime, callback queue and event loop and Web APIs. Nothing major technical here.

it’s single threaded. That means, code execution will be done one at a time. Since code execution is done sequentially, any code that takes longer time to execute, will block anything that needs to be executed. Hence sometimes you see below screen while using Google Chrome.

(chrome page unresponsive dialog)

blocked, browser will stop doing all those things, which means browser will simply freeze and won’t respond to anything.

while loop.

while(true){}

Any code after above statement won’t be executed as while loop will loop infinitely until system is out of resources. This can also happen in infinitely recursive function call.

one-process-per-site policy and a process uses same JavaScript execution thread.

To visualize, how JavaScript executes a program, we need to understand JavaScript runtime.

(JavaScript Runtime Environment)

foo().

console.log('Hello from baz').

function) returns some value, and it will continue pending function executions.

(Stack frames)

stack frame. If any function call at given stack frame produces an error, JavaScript will print stack trace which is nothing but a snapshot of code execution at that stack frame.

foo();

baz function and JavaScript will print below stack trace to figure out what went wrong and where.

(error stack trace in chrome console)

Since JavaScript is single threaded, it has only one stack and one heap. Hence, if any other program want to execute something, it has to wait until previous program is completely executed.

This is bad for any programming language but JavaScript was designed to be used as general purpose programming language, not for very complex stuff.

So let’s think of one scenario. What if a browser sends a HTTP request to load some data over network or to load an image to display on web page. Will browser freeze until that request is resolved? If it does, then it’s very bad for user experience.

V8 JavaScript engine, developed by them. But guess what, browser uses more than just a JavaScript engine. This is what browser under the hood looks like.

(browser under the hood)

task queue.

setInterval, caching, database storage and much more. These features of browser help us create rich web applications.

Web APIs.

callback function. Responsibility of callback function is to execute some JavaScript once Web API is done with it’s work. Let’s understand how all pieces work together.

once the stack is empty. Later, stack will execute callback function.

setTimeout function is as below.

setTimeout(callbackFunction, timeInMilliseconds);

timeInMilliseconds. Let’s modify our earlier program and use this API.

foo();

foo function calls. Meanwhile, Web API is waiting for 3 seconds to pass. Once 3 seconds are passed, it will push this callback to callback queue and since stack is empty, event loop will put this callback back on the stack where execution of this callback will happen.

this link.

(http://latentflip.com/loupe/)

Node.js, it has to do more because node promises more. In case of browser, we are limited to what we can do in the background. But in node, we can pretty much do most of the things in background, even it is simple JavaScript program. But, how does that work?

written in c) to work along side V8 event loop to extend what can be done in background. Node follows same callback approach like Web APIs and works in similar fashion as the browser.

(node.js under the hood)

non-blocking event driven asynchronous I/O architecture.

30 min video.

WebAssembly which has in-depth knowledge of how a JavaScript engine works under the hood.

microtask queue that is used for promises. You can also learn about it from the article below.