Hey champs in this article we will try to understand what is javascript , where it is used and why it is used , this article will focus on high overview of how javascript works behind the scenes it is the intro part of js where we will try to answer some questions .
chaliye shuru karte hai javascript ki kahani
Javascript is a high-level , interpreted , dynamically typed programming language which is mainly used to make web pages interactive and dynamic .
It was originally created to run inside browsers but today it also runs on servers using environement like Node.js . So earlier it was a scripting language whose main task was to control browser but later on it became a fully programming language .
It can run on client side as well as on the server side but for that it need a runtime enviornment .
server : Node.js (V8 + libuv + c++ bindings)
client : browser
Now you will be wondering about what is a browser and what is V8 engine so let us discuss that .
Browser
It is your google chrome and safari where you go and search stuff and connects to internet
so what browser does is it contains a few things in it
1) Rendering engine
2) Javascript Engine(V8)
3) Web APIs
4)Event Loop
5)Networking Layering
each one has their own jobs and working .let us discuss them one by one ,so what happens when you visit a web page Now tell me what is a web page so basically
A web page is made of:
- HTML → Structure
- CSS → Styling
- JavaScript → Behavior
📄 HTML
HTML defines structure. It provides a structure or skeleton to your page .
Example:
<h1>Hello</h1>
<button>Click</button>
When browser loads HTML:
👉 It creates a
DOM (Document Object Model) tree
🎨 CSS
CSS defines styling. It basically styles your web page it adds colours and styling to your pages .
Example:
h1 { color:red; }
when browser downloads or load the css file it creates :
👉 CSSOM (CSS Object Model)
🖥 Render Tree
DOM + CSSOM combine to form:
👉 Render Tree
This is what gets displayed on the screen.
So do you understand so basically our webpage is consisting of three things HTML , Css , js , all these files are loaded on the browser and then rendering engine of the browser create a render tree behind the scene and the web page is shown on the screen ,so rendering engine make render tree when js file loads it is forwarded to V8 engine where it gets executed .
V8 engine : It is a javascript engine created by : Google
used in: browser (google) , server(node.js)
What V8 does
- Parses JS
- Converts to AST
- Generates bytecode (Ignition)
- Optimizes using TurboFan
- Executes machine code
- Performs garbage collection
what ever is written in the js is file is analysed and executed by this V8 engine it does not change DOM , or UI the code inside js uses browser APIs to do that , now you will be wondering what are browser’s apis ,so browser provides a lot api’s which Js can use and server different puropses .
Browser gives JavaScript extra capabilities.
🔹 DOM APIs
- document
- getElementById
- querySelector
- createElement
🔹 Web APIs
- setTimeout
- fetch
- WebSocket
- localStorage
- sessionStorage
- geolocation
- history
- navigator
Important:
👉 These APIs are provided by browser
👉 NOT by V8
V8 engine’s code is written in C++
main task is to convert the js code into machine code .So till now we have understood what a browser is what is contains , what is webpage , what is rendering engine , what is v8 engine what are browser apis . Now we will move towards event loop
To understand event loop we have to understand how the code inside the javascript file executes .
How code is executed inside the js engine .
In a script.js file some code is written inside that ,which contains some variables ,some functions , dom manupulation, timeouts, promises , as we know javascript is a single threaded language so every instruction inside that file is executed line by line ,what js engine does is it creates a global execution context a big container which is further divided into two sections :
1) variable enviornment
2)code enviornment
In the variable envioenment all the variables and functions are declared as undefined .
In code enviornment section the code begins to executed line by line as soon as it gets a value it is assigned immediately in the variabl enviornment.when a new function is invoked a new execution context is created which also has these two sections in it ,all these are pushed into the stack know as call stack and executed in the LIFO manner .
now when a promise comes it goes inside microtask queue and when a timeout is called then it goes inside the callback queue .when the call stack is empty then first the promises or you can say that the microtask queue is resolved first and then callback queue get its turn that is being tracked by a Event loop .That means event loop whose task is to perform the code execution fast and asynchronous .
so this is the overview of how js code execution works inside the browser
Full Page Rendering Flow (Complete Picture)
When you open a website:
Step 1
Browser downloads HTML.
Step 2
HTML → DOM tree created.
Step 3
CSS → CSSOM created.
Step 4
DOM + CSSOM → Render Tree.
Step 5
Render Tree → Layout + Paint → Screen.
Step 6
If JS exists:
- JS sent to V8
- V8 executes JS
-
If JS modifies DOM:
→ Browser updates DOM
→ Reflow/Repaint happens
→ Screen updates
Summary
Browser =
- Rendering Engine (DOM + CSSOM)
- JavaScript Engine (V8)
- Web APIs
- Event Loop
V8 =
- Executes JS only
JavaScript =
- Language
DOM =
- Browser structure representation of HTML
Top comments (0)