HOW DOES
ACTUALLY WORK ?
JS
HEY ,JSWHAT ARE YOU ?
I’m aSINGLE-THREADED,
NON-BLOCKING,ASYNCHRONOUS,
CONCURRENTlanguage
I have a CALL STACK,
an EVENT LOOP,a CALLBACK QUEUE,
some others APIs,and stuffs…
….
!!!
GOOGLE’s V8 JAVASCRIPT RUNTIME ENGINE
do you have a CALL STACK,
an EVENT LOOP,a CALLBACK QUEUE,
some others APIs,and stuffs ???
HEY ,
I have a CALL STACK and a
HEAP…
I don’t know what other things are !
HEAP STACK
Memory Allocation
The Call Stack
main()
printSquare(n)
calcSquare(n)
multiply(n, n)
HEAP
STACK
main()
printSquare(n)
calcSquare(n)
multiply(n, n)
WEB APIs
DOM (document)
ajax (XMLHTTPRequest)
setTimeout
CALLBACK QUEUE onClick onLoad onDone
EVENT LOOP
THE CALLSTACK
One thread == One call stack == One thing at a time
main()
printSquare(n)
calcSquare(n)
multiply(n, n)
function multiply(a, b){return a * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
main()
function multiply(a, b){return b * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
main()
function multiply(a, b){return b * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
main()
function multiply(a, b){return b * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
main()
function multiply(a, b){return b * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
main()
function multiply(a, b){return b * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
printSquare(n)
main()
function multiply(a, b){return b * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
printSquare(n)
calcSquare(n)
main()
function multiply(a, b){return b * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
printSquare(n)
calcSquare(n)
multiply(n, n)
main()
function multiply(a, b){return b * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
printSquare(n)
calcSquare(n)
main()
function multiply(a, b){return b * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
printSquare(n)
main()
function multiply(a, b){return b * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
printSquare(n)
console.log()
main()
function multiply(a, b){return b * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
printSquare(n)
main()
function multiply(a, b){return b * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
function multiply(a, b){return b * b;
}function calcSquare(n){
return multiply(n, n);}function printSquare(n){
var result = calcSquare(n);console.log(result);
}printSquare(4);
THE CALL STACK
function one(){throw new Error(“Oops!”);
}function two(){
one();}function three(){
two();}three();
THE CALL STACK
main()
three(n)
two()
one()
function stackTrace() {
var err = new Error();return err.stack;
}
HELPFUL WHEN DEBUGGING
function foo(){return foo();
}
foo();
THE CALL STACK
main()
foo()
function foo(){return foo();
}
foo();
THE CALL STACK
main()
foo()
foo()
function foo(){return foo();
}
foo();
THE CALL STACK
main()
foo()
foo()
foo()
function foo(){return foo();
}
foo();
THE CALL STACK
main()
foo()
foo()
foo()
foo()
function foo(){return foo();
}
foo();
THE CALL STACK
main()
foo()
foo()
foo()
foo()
foo()
foo()
foo()
BLOCKINGCode that are slow to run
BLOCKINGSome examples:- console.log() is not slow
- A loop from 1 to 10,000,000,000 is slow- Network request is slow- Image processing is slow
var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);
// get data done, now log them out
console.log(a);console.log(b);console.log(c);
THE CALL STACK
main()
var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);
// get data done, now log them out
console.log(a);console.log(b);console.log(c);
THE CALL STACK
main()
getSynchronous(“/a”)
var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);
// get data done, now log them out
console.log(a);console.log(b);console.log(c);
THE CALL STACK
main()
getSynchronous(“/b”)
var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);
// get data done, now log them out
console.log(a);console.log(b);console.log(c);
THE CALL STACK
main()
getSynchronous(“/c”)
var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);
// get data done, now log them out
console.log(a);console.log(b);console.log(c);
THE CALL STACK
main()
console.log(a)
var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);
// get data done, now log them out
console.log(a);console.log(b);console.log(c);
THE CALL STACK
main()
console.log(b)
var a = $.getSynchronous(“/a”);var b = $.getSynchronous(“/b”);var c = $.getSynchronous(“/c”);
// get data done, now log them out
console.log(a);console.log(b);console.log(c);
THE CALL STACK
main()
console.log(c)
WHY IS THIS A PROBLEM ?Because we runs
code in BROWSERS.See the demo.
THE SOLUTION ?Asynchronous
callbacks.
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
Designvelopers
there
HOW DOES THIS WORK ?THE CODE THE CONSOLE
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
main()
console.log(“Hi”)
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
main()
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
main()
setTimeout(callback)
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
main()
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
main()
console.log(“DSV”)
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
main()
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
callback
console.log(“there”);
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
THE CALL STACK
CONCURRENCY & EVENT LOOPOne thing at a time.Except, not really.
HEAP
STACK
main()
printSquare(n)
calcSquare(n)
multiply(n, n)
WEB APIs
DOM (document)
ajax (XMLHTTPRequest)
setTimeout
CALLBACK QUEUE onClick onLoad onDone
EVENT LOOP
One thing at a time !
But we still have this !
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
main()
console.log(“Hi”)
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
main()
setTimeout(callback)
timer
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
Designvelopers
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
main()
setTimeout(callback)
timer
console.log(“DSV”)
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
Designvelopers
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
callback
main()
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
Designvelopers
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
callback
WHAT DOES DO ?
- It watches the Call Stack and the Callback Queue
- If the Stack is empty, it takes the first element in the Callback Queue, and pushes it into the Stack
EVENT LOOP
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
Designvelopers
there
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
callback
console.log(“there”)
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
Designvelopers
there
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
callback
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
Designvelopers
there
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 5000);
console.log(“Designvelopers”);
Hi
Designvelopers
there
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
Beside setTimeout, the other web APIs are (for examples):- DOM manipulation- XHR (XMLHttpRequest)- Etc…
ANOTHER EXAMPLEs:setTimeout(callback, 0);
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 0);
console.log(“Designvelopers”);
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 0);
console.log(“Designvelopers”);
Hi
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
main()
console.log(“Hi”)
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 0);
console.log(“Designvelopers”);
Hi
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
main()
setTimeout(callback)
timer
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 0);
console.log(“Designvelopers”);
Hi
Designvelopers
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
main()
setTimeout(callback)
timer
console.log(“DSV”)
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 0);
console.log(“Designvelopers”);
Hi
Designvelopers
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
callback
main()
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 0);
console.log(“Designvelopers”);
Hi
Designvelopers
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
callback
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 0);
console.log(“Designvelopers”);
Hi
Designvelopers
there
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
callback
console.log(“there”)
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 0);
console.log(“Designvelopers”);
Hi
Designvelopers
there
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
callback
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 0);
console.log(“Designvelopers”);
Hi
Designvelopers
there
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
console.log(“Hi”);
setTimeout(function (){console.log(“there”);
}, 0);
console.log(“Designvelopers”);
Hi
Designvelopers
there
CALLBACK QUEUE
EVENT LOOP
CODE
CONSOLE
STACK WEB APIs
ANOTHER EXAMPLEs:- setTimeOut: the minimum time to
execute a function- synchronous vs asynchronous and how this effect the browser
- don’t block the event loop !
THE END