A lot of my friends who are new to javascript find this concept really daunting and it is infact a topic which makes people working in javascript google it again and again . So i will just put it here for your (and my ) reference .
So when we talk about asynchronous programming in javascript , we are nowhere near parallel programming , but can we achieve parallel programming in javascript ? Well, with HTML5 spec , we can using web workers , but that is actually a browser spec rather then a feature of javascript . Memorize it by heart (as we said during our school days ), javascipt cannot do parallel processing . Its not even meant for it , it is single threaded by design , which means it works on only one thing at a time .
But this statement that it works only on one thing at a time sometimes feel hard to digest right because some things (setTimeout , ajax , setInterval i am looking at you) just look like executing in parallel . Well because they are. I know i have made you severely messed up , so lets start again step by step . Lets first state these four things which are our warriors in javascript land :
1) stack
2) queuee
3) webapis
4) event loop
They are a team , so lets understand their strategy . Now , when javascript file is parsed , all functions are pushed in the stack and it executes synchronously . There are certain webapis of browsers like - setTimeout , setInterval , ajax calls which are outside the javascript runtime engine. they are in the browser and run in sort of a different thread (remember javascipt runtime engine is single threaded) . By running i mean performing their only job, in case of setTimeout , setInterval , running a timer . After completing their task , their callback functions are pushed to the queue , not automatically executed otherwise its effects would appear suddenly in the middle of your code execution . Wherever you see a callback function associated with an event , automatically infer that the function will first be pushed to the queue . After the stack is empty and the javascript engine has nothing to do, the items in the queue would be pushed in the stack and executed synchronously .
But who pushes these functions from the queue to the stack , who else our silent warrior the event loop . Now this guy never sleeps , it runs over and over again, hence the name loop, to check the stack and the queue .
Events like onclick , onmouseup etc etc also execute outside the javscript runtime and its callback functions are also pushed into the queue .
Webworkers are a little different as the javascript code inside the web workers are run in a different thread , also called a worker thread . This thread is not necessarily like the main thread because it does not have access to the window object , cannot access the DOM . It is like a backup knife of a soldier . It is not what he attacks with first , but it definietly increases the damage .
So web workers are just for executing large javascript functions (like complex algorithms ) and return the result in form of messages whose handlers again first go into the queue .
So this is my short take on asyncronous javascript . Hope it helps .
So when we talk about asynchronous programming in javascript , we are nowhere near parallel programming , but can we achieve parallel programming in javascript ? Well, with HTML5 spec , we can using web workers , but that is actually a browser spec rather then a feature of javascript . Memorize it by heart (as we said during our school days ), javascipt cannot do parallel processing . Its not even meant for it , it is single threaded by design , which means it works on only one thing at a time .
But this statement that it works only on one thing at a time sometimes feel hard to digest right because some things (setTimeout , ajax , setInterval i am looking at you) just look like executing in parallel . Well because they are. I know i have made you severely messed up , so lets start again step by step . Lets first state these four things which are our warriors in javascript land :
1) stack
2) queuee
3) webapis
4) event loop
They are a team , so lets understand their strategy . Now , when javascript file is parsed , all functions are pushed in the stack and it executes synchronously . There are certain webapis of browsers like - setTimeout , setInterval , ajax calls which are outside the javascript runtime engine. they are in the browser and run in sort of a different thread (remember javascipt runtime engine is single threaded) . By running i mean performing their only job, in case of setTimeout , setInterval , running a timer . After completing their task , their callback functions are pushed to the queue , not automatically executed otherwise its effects would appear suddenly in the middle of your code execution . Wherever you see a callback function associated with an event , automatically infer that the function will first be pushed to the queue . After the stack is empty and the javascript engine has nothing to do, the items in the queue would be pushed in the stack and executed synchronously .
But who pushes these functions from the queue to the stack , who else our silent warrior the event loop . Now this guy never sleeps , it runs over and over again, hence the name loop, to check the stack and the queue .
Events like onclick , onmouseup etc etc also execute outside the javscript runtime and its callback functions are also pushed into the queue .
Webworkers are a little different as the javascript code inside the web workers are run in a different thread , also called a worker thread . This thread is not necessarily like the main thread because it does not have access to the window object , cannot access the DOM . It is like a backup knife of a soldier . It is not what he attacks with first , but it definietly increases the damage .
So web workers are just for executing large javascript functions (like complex algorithms ) and return the result in form of messages whose handlers again first go into the queue .
So this is my short take on asyncronous javascript . Hope it helps .
Very well put. I suppose you are really good at this. one question though. Kaha se chaapa hai :p
ReplyDeletechaapne ke din gye .. samajhne ke din h abhi :P
ReplyDelete