Web Browser Explained in Detail

Table of content

1. Introduction
2. Browser Segments
3. Visual display of the browser Segments

Introduction
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

Browser Segments
A modern and standard browser has the following segment which helps in executing a Jscript program.

1. The Javascript Engine
2. The Runtime Segment(Web APIs Section)
3. The Event Loop Segment(Action man)
4. The Callback Queue (Chief Justice)

The Javascript Engine
The Javascript engine (the brainbox of the browser) but unfortunately, the brainbox doesn't handle all the operations(e.g. httpRequest).

So what does the brainbox(Javascript engine) do and what is that brainbox(Javascript engine) all about?

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 Javascript engine is made up of two component which performs different operations:

1. The memory heap
2. The Call Stack

The Memory Heap
The memory heap is a section in the memory in which your program allocation happens(mind you, every browser has a limit of what can be stored into the memory and that's when you experience stack-overflown error e.g during recursion that has no limit/control flow ). So memory allocation is part of what the Javascript engine does.

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

First of all, i will like to remind you that Javascript is an asynchronous language by nature which means "a language that is not blockable by any part of the program that takes time, and that's why we use things like async and await to perform implicit synchronous because; API operations take time".

Below is the break down of what the call stack does

The Call Stack uses the LIFO data-structure methodology which means first-to-enter is the last to come-out thereby, making the data-control a one-way-gate-flow(one-way-gate-flow in the sense that; when an error occurs, the call stack just says "its the last input that caused the error then it pulls out the last input immediately with ease"). Javascript is a none-blocking language which means; it keeps running the next block of code in the thread if the current one exhaust the time-frame. But, many people confuse the javascript none-blocking concept with the error-handling-concept.

So, without withstanding, i will like to inform you that javascript stops executing ones it ran into an error even if the next block/code has no error. In a nutshell, the none-blocking concept of js doesn't mean if a block of code is wrong the program will keep executing but rather if a block of code exceeds a timeframe then Jscript executor will move to the next code.

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.

So this segment of your web browser handles the API operations, not the Javascript engine.

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).

In a nutshell, the Callback Queue helps to determine what part of the program should be executed next. I know many of us will be thinking; "what happens to hoisting won't it affect our program, because the Callback Queue uses the Queue data-structure-pattern which means FIFO?". But, never mind because javascript handles that by simply performing decorations before any other thing 😁😁

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.

Assumption of how the Event loop works

Visual Display of the Browser Segments

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/