latentflip / loupe

Visualizing the javascript runtime at runtime
http://latentflip.com/loupe
3.21k stars 504 forks source link

Instructions going into call stack. #20

Open hannadrehman opened 5 years ago

hannadrehman commented 5 years ago

This is not a a ISSUE report. just a question regarding event loop implementation in this application

Hi, first of thanks for explaining eventloop. helped me alot in understanding it properly

here is a simple link to my problem http://latentflip.com/loupe/?code=Zm9yICh2YXIgaSA9IDA7aTwxMDA7aSsrKXsKICAgIHZhciB4ID0gaSoyOwogICAgdmFyIHogPSB4ICsgaQp9!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

according to this every instruction like x = x+1 will be sent to call stack where it will be executed and then removed from the stack.

i had a great discussion with my CTO he said that no way every instruction can go to the call stack. it will very inefficient way to execute every instruction by sending it to stack and executing it there . there are multiple operations in stack like push, pop, keeping the pointer of current, next etc. and his argument was only function references can go to call stack and the execution of instructions in those functions is simply done by interpreter line by line. without moving to the call stack.

MDN says

A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.

When a script calls a function, the interpreter adds it to the call stack and then starts carrying out the function. Any functions that are called by that function are added to the call stack further up, and run where their calls are reached. When the current function is finished, the interpreter takes it off the stack and resumes execution where it left off in the last code listing. If the stack takes up more space than it had assigned to it, it results in a "stack overflow" error.

https://developer.mozilla.org/en-US/docs/Glossary/Call_stack

i searched alot on how instructions are executed in callstack but didnt get any suitable answer. everyone talks about functions only.

but in this application each and every instruction goes to callstack. can you pls explain where exactly is each instruction is executed and where functions are executed