Introduction
While learning about asynchronous JavaScript and the event loop, I realized something important:
I understood concepts like async/await and Promises, but I didn't fully understand where JavaScript actually runs and what happens behind the scenes when code executes.
So I decided to organize the entire picture.
In this article, we'll explore:
- The JavaScript runtime environment
- What V8 actually does
- Browser internals (DOM and rendering)
- How Node.js fits into the picture
- What DevTools is really showing us
By the end, you'll have a clearer understanding of how JavaScript execution works inside modern browsers.
JavaScript Needs a Runtime Environment
A common misconception is that JavaScript runs by itself.
In reality, JavaScript needs a runtime environment.
The two most common environments are:
- A browser
- Node.js
Let's start with the browser.
What Executes JavaScript?
The component responsible for executing JavaScript is called a:
JavaScript Engine
Popular examples include:
- Chrome / Edge → V8
- Firefox → SpiderMonkey
- Safari → JavaScriptCore
In this article, we'll focus on V8, the engine used by Chrome and Node.js.
What Is V8?
V8 is Google's JavaScript engine.
Its primary responsibilities are:
- Parsing JavaScript code
- Compiling code into executable instructions
- Running the code
- Managing memory
In short:
V8 is responsible for executing JavaScript.
What Does V8 Actually Do?
At a high level, V8 performs four major tasks:
- Parsing
- Compilation (JIT)
- Execution
- Memory Management
1. Parsing
V8 first reads your JavaScript source code and converts it into an:
AST (Abstract Syntax Tree)
The code is not executed directly as text.
Instead, V8 first transforms it into a structured representation that can be analyzed and optimized.
2. Compilation (JIT)
V8 uses:
JIT (Just-In-Time) Compilation
Rather than fully compiling code before execution, V8 optimizes code while the application is running.
A simplified flow looks like this:
- Execute code initially
- Detect frequently executed code paths
- Optimize those hot paths
This allows applications to start quickly while becoming faster over time.
Internally, V8 uses components such as:
- Ignition
- TurboFan
to perform these optimizations.
3. Execution
After compilation, V8 executes the code.
One important characteristic is:
JavaScript runs on a single main thread.
This means only one JavaScript task can execute at a time.
You might wonder:
If JavaScript is single-threaded, how do timers, network requests, and user interactions happen without blocking everything?
The answer is:
The browser provides Web APIs and the Event Loop.
We'll get to those shortly.
4. Memory Management
V8 automatically manages memory through:
Garbage Collection (GC)
Its responsibilities include:
- Detecting unused objects
- Reclaiming memory
This allows developers to focus on application logic rather than manual memory management.
A Common Misunderstanding
V8 handles:
- JavaScript execution
- Optimization
- Memory management
However, V8 does not directly handle:
- DOM manipulation
- HTTP requests
- Timers
- Rendering
These features belong to the browser itself.
So Who Handles Those Features?
The answer is:
The Browser
Browser Architecture
A simplified browser architecture looks like this:
text +----------------------+ | Browser | +----------------------+ | V8 (JavaScript) | | Web APIs | | DOM | | Rendering Engine | +----------------------+
Each component has a different responsibility.
What Are Web APIs?
Web APIs are features provided by the browser.
Examples include:
- setTimeout
- fetch
- addEventListener
For example:
javascript setTimeout(() => { console.log("Hello") }, 1000)
Many developers assume setTimeout() is part of JavaScript itself.
Technically, it isn't.
It is provided by the browser's Web API layer.
What Is the DOM?
DOM stands for:
Document Object Model
It is a structured representation of HTML that JavaScript can manipulate.
Through the DOM, JavaScript can:
- Add elements
- Modify text
- Change attributes
- Respond to user interactions
Without the DOM, JavaScript would have no way to modify a web page.
What Is the Rendering Engine?
The rendering engine is responsible for displaying content on the screen.
Its workflow typically looks like this:
- Parse HTML → Build DOM
- Parse CSS → Build CSSOM
- Combine DOM + CSSOM → Build Render Tree
- Calculate Layout
- Paint Pixels on Screen
This process is often called the Rendering Pipeline.
Whenever JavaScript modifies the DOM, parts of this pipeline may run again.
Separation of Responsibilities
V8
Responsible for:
- JavaScript execution
- Optimization
- Memory management
Browser
Responsible for:
- Web APIs
- DOM management
- Network communication
- Rendering
This distinction is important.
JavaScript in the browser works because of the combination of:
V8 + Browser APIs
What About Node.js?
Earlier we said JavaScript requires a runtime environment.
The browser is one option.
Another is Node.js.
Node.js allows JavaScript to run outside the browser.
Features of Node.js
Node.js can:
- Access the operating system
- Read and write files
- Open network connections
- Run server-side applications
How Does Node.js Use V8?
Node.js also uses V8 internally.
The main difference is the environment around it.
Browser
- Has DOM
- Has rendering
- Has browser APIs
Node.js
- No DOM
- No rendering engine
- Has OS-level APIs
Examples include:
- fs
- process
- http
The JavaScript engine is the same.
The surrounding runtime is different.
What Does DevTools Actually Show?
At this point, we know:
- V8 executes JavaScript
- The browser manages rendering and Web APIs
So what exactly is Chrome DevTools showing us?
The answer is:
The internal state of the browser.
What Can DevTools Visualize?
DevTools can display:
- JavaScript execution
- Call stacks
- Memory usage
- DOM structure
- Rendering activity
- Network requests
In other words, it exposes the components we've discussed throughout this article.
DevTools and V8
DevTools works closely with V8.
Examples:
- Breakpoints pause JavaScript execution
- Step execution advances code line by line
- Variable inspection shows runtime state
- Call stacks reveal execution history
You can think of DevTools as a window into V8.
The Most Important Tool: Performance Tab
One of the most valuable DevTools features is:
The Performance Tab
It records browser activity over time.
What Does It Show?
Typical entries include:
- Script → JavaScript execution (V8)
- Rendering → Rendering Engine
- Layout → Layout calculations
- Paint → Screen drawing
- Tasks → Main thread work
This is essentially the browser architecture visualized as a timeline.
Finding Performance Bottlenecks
This is where DevTools becomes extremely useful in real-world development.
Step 1
Open the Performance tab.
Step 2
Click Record.
Step 3
Interact with your application.
Examples:
- Clicking buttons
- Scrolling
- Opening dialogs
Step 4
Stop recording and inspect the results.
What Should You Look For?
Long Script Execution
If Script activity dominates the timeline:
→ JavaScript execution is expensive.
Possible solutions:
- Split work into smaller tasks
- Use Web Workers
- Improve algorithms
Frequent Script and Rendering Cycles
If Script and Rendering alternate constantly:
→ Excessive DOM updates may be occurring.
Possible solutions:
- Batch DOM changes
- Reduce unnecessary updates
- Use frameworks with Virtual DOM optimization
Long Rendering Activity
If Rendering dominates:
→ The browser is spending significant time drawing the page.
Possible solutions:
- Reduce reflows
- Minimize layout recalculations
- Use transform and opacity when possible
Long Tasks
Tasks longer than 50ms deserve attention.
Long tasks can:
- Block user interactions
- Cause UI freezes
- Hurt user experience
Flame Charts
The Flame Chart shows execution time at the function level.
This makes it possible to identify:
Exactly which function is consuming time.
The Core Purpose of the Performance Tab
Ultimately, the Performance tab helps answer one question:
"What is making my application slow?"
The solution depends on the root cause.
| Cause | Typical Solution |
|---|---|
| JavaScript execution | Optimization, Workers, Task Splitting |
| DOM operations | Reduce updates |
| Rendering | Rendering optimization |
Conclusion
Let's summarize.
- V8 executes JavaScript
- Browsers provide Web APIs, DOM, and rendering
- Node.js uses the same V8 engine in a different environment
- DevTools visualizes what is happening internally
- The Performance tab helps identify bottlenecks
Once you understand these layers, performance optimization becomes much more systematic.
Instead of saying:
"The page feels slow."
You can explain:
"The JavaScript execution is blocking the main thread."
or
"Rendering is taking too long."
Understanding the browser's architecture helps you move from guesswork to evidence-based debugging and optimization.
Top comments (0)