Table of content
- Browser Segments
- Visual display of the browser Segments
Good day the wonderful Jscript community, its been a while😊.
So what are we looking at today???
Yes everybody knows there is something called the DOM and the Runtime engine (V8 engine)because Jscript is a runtime language/scripting language/multipurpose language and many more as people call it 😊. I am here to share my little knowledge but, feel free to correct me if i am wrong by commenting. Now let's move straight to the point
A modern and standard browser has the following segment which helps in executing a Jscript program.
- The Runtime Segment(Web APIs Section)
- The Event Loop Segment(Action man)
- The Callback Queue (Chief Justice)
Note every standard browser has an engine (e.g the Googles V8 Engine), this engine is what the chrome and Node.js use if I am not mistaken.
- The memory heap
- The Call Stack
The Memory Heap
The Call Stack
The call stack uses the stack-data-structure(LIFO) to record and monitor the current state of the program and this is what helps in stack-tracing when you experience error.
Let's break down the Call Stack clearly with respect to what it does
Below is the break down of what the call stack does
So for the fact that JScript is a none-blocking language, web-browser's engineers now implemented the Call-Stack segment for controlling how your program-operand is structured and passed into the memory and its best suitable for Stack-tracing because immediately an error is encountered, the stack will immediately throw it out easily(which we will talk more in the next line).
The Call Stack creates a bucket"(the bucket is technically called the stack frame)" for each operand(When i say operand, i mean a code in your program that performs an operation). The stack frame holds different operand of your program that performs an operation and if an error occurs in your web application, the section which caused the error is easily noticed because they are stored into different stack frame and it's from this Stackframe that a stack-trace gets generated that we see in our console for tracing an error.
Finally, the Call Stack helps to keep a good track of our application progress/state by simply using the LIFO methodology.
The Runtime Segment(Web APIs Section)
This is the second segment that makes up a standard web browser and this section is in control of different API operations e.g HTTP request to a server, DOM events, Timeout(setTimeout, setInterval &, etc), and many other API operations.
The Callback Queue (Chief Justice)
I call this segment the Chief justice because it's capable of deciding what is next-in-line to be run 😊.
So what is this segment all about???
Callback Queue is a segment of the browser that controls what is to be run next in the web browser(This segment has to be here otherwise what happens when your API requests are done).
The Event Loop Segment(Action man)
I call this segment the action man 😁😁 because it never gets tired and keeps running as long as the Callback queue still has a program structured inside to be run.
So what is Event Loop Segment doing in the web browser???
If you are from a python background, the Event Loop is similar to tkinter.loop(). So basically, an event loop keeps a program running by simply taken in what the Callback Queue has next to offer.
Finally, i will thank you for reading through this and i hope you learned something. If there is a mistake in my concept kindly let me know by commenting. "You keep learning as long as you still have some breath left in you".'
Link to my personal platform where you can find my latest articles: https://www.youmustknowjs.com/