Browsers, rendering engines, and JavaScript engines
A browser is the complete application. Rendering and JavaScript engines are major components inside it.
Quick distinction
| Component | Responsibility |
|---|---|
| Browser | Tabs, navigation, networking, storage, permissions, security, developer tools, and coordinating page execution |
| Rendering engine | Parses Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS), builds the page structure, calculates layout, and draws pixels |
| JavaScript engine | Parses, compiles, optimizes, and executes JavaScript |
Mental model: The browser manages the experience, the rendering engine draws the page, and the JavaScript engine runs the code.
Common browser and engine combinations
| Browser | Rendering engine | JavaScript engine |
|---|---|---|
| Google Chrome | Blink | V8 |
| Microsoft Edge | Blink | V8 |
| Brave and Opera | Blink | V8 |
| Apple Safari | WebKit | JavaScriptCore |
| Mozilla Firefox | Gecko | SpiderMonkey |
Browsers can share the same engines while providing different user interfaces, privacy policies, features, update strategies, and integrations.
For example, Chrome, Edge, Brave, and Opera are different browser products built on Chromium and commonly use Blink and V8.
What does the browser do?
The browser is more than a page renderer. It coordinates:
- navigation and tabs,
- Domain Name System (DNS) and network requests,
- Hypertext Transfer Protocol (HTTP) caching,
- cookies and web storage,
- permissions and security policies,
- process isolation and sandboxing,
- developer tools,
- the event loop,
- communication between the rendering and JavaScript engines.
Modern browsers use multiple processes. The browser interface, web pages, network services, and Graphics Processing Unit (GPU) work may run in separate processes for security and stability.
What does the rendering engine do?
The rendering engine turns web content into pixels:
- Parses HTML into the Document Object Model (DOM).
- Parses CSS into the CSS Object Model (CSSOM).
- Combines structure and styles to determine what should appear.
- Performs layout to calculate element sizes and positions.
- Performs paint to create drawing instructions.
- Rasterizes and composites layers to display pixels on the screen.
When JavaScript changes the DOM or styles, the rendering engine may need to repeat some of this work.
The cost depends on the change:
- Changing dimensions or position may trigger layout.
- Changing colors or shadows may trigger paint.
- Changing
transformoropacitycan often be handled during compositing, which is usually cheaper.
What does the JavaScript engine do?
The JavaScript engine:
- parses JavaScript source code,
- compiles it into executable instructions,
- executes the code,
- optimizes frequently executed code,
- manages memory and garbage collection.
The JavaScript engine implements the JavaScript language, formally standardized as ECMAScript.
Browser features such as document, fetch, setTimeout, and localStorage are Web Application Programming Interfaces (Web APIs) provided by the browser—not by JavaScript itself.
This is why the same JavaScript engine can run outside a browser. For example, V8 is used by both Chrome and Node.js, but Node.js provides different host APIs.
How the engines work together
Consider:
document.querySelector("h1").textContent = "Hello";- The JavaScript engine executes the code.
documentconnects the JavaScript code to the browser’s DOM implementation.- The rendering engine updates the page structure.
- The browser schedules any required style, layout, paint, and compositing work.
- The updated pixels appear on the screen.
The rendering and JavaScript engines are separate components, but they communicate through bindings exposed as Web APIs.
Main-thread implication
JavaScript execution and much of rendering share the page’s main thread.
A long-running JavaScript task can delay:
- user input,
- DOM updates,
- style calculation,
- layout,
- paint,
- animation frames.
This is why heavy JavaScript can make a page feel frozen even when the network is fast.
Some work can happen elsewhere—for example, Web Workers run JavaScript off the main thread, and browsers may use additional threads for rasterization and compositing—but workers cannot directly manipulate the DOM.
Browser compatibility implication
Web standards define expected behavior, but engines implement those standards independently.
Differences can occur because:
- an engine has not implemented a feature,
- implementations contain different bugs,
- a feature is behind a flag or released on a different schedule,
- performance characteristics differ between engines.
Test important functionality across browser engines—not only across browsers that all use Chromium.
Interview answer
A browser is the complete application responsible for navigation, networking, storage, security, processes, and coordinating a page. Its rendering engine turns HTML and CSS into layout and pixels, while its JavaScript engine compiles and executes JavaScript. For example, Chrome uses Blink and V8, Safari uses WebKit and JavaScriptCore, and Firefox uses Gecko and SpiderMonkey. JavaScript can update the DOM through browser-provided Web APIs, which may cause the rendering engine to perform style, layout, paint, or compositing work.
Knowledge check — Q&A
Q: Is Chrome the same thing as V8?
No. Chrome is a browser; V8 is the JavaScript engine used inside it.
Q: What is the difference between Blink and V8?
Blink renders web content. V8 executes JavaScript.
Q: Is document.querySelector part of the JavaScript language?
No. document and the DOM API are provided by the browser.
Q: Why can long-running JavaScript block rendering?
JavaScript and much of the rendering pipeline use the page’s main thread.
Q: If Chrome and Edge use the same engines, are they the same browser?
No. They share core engine technology but differ in browser features, services, policies, interface, and release decisions.
Q: Why test Firefox and Safari if a site works in Chrome and Edge?
Chrome and Edge both use Blink and V8. Firefox and Safari exercise different engine implementations.