Browser Engine
Browser engine = renders web pages (HTML/CSS/JS)
What is a Browser Engine?
"Rendering engine for web content"
A browser engine (rendering engine) is the component that renders web pages by parsing HTML, CSS, and executing JavaScript.
"A browser engine is the software component that parses HTML/CSS, executes JavaScript, and renders web pages in the browser."
Main Components
Parser · Layout · Paint · JavaScript engine
- HTML Parser: Parses HTML into DOM
- CSS Parser: Parses CSS into CSSOM
- Layout Engine: Calculates element positions
- Paint Engine: Renders pixels
- JavaScript Engine: Executes JavaScript
"Browser engines include parsers (HTML/CSS), layout engine, paint engine, and JavaScript engine."
Rendering Process
Parse → Style → Layout → Paint → Composite
- Parse HTML → DOM tree
- Parse CSS → CSSOM tree
- Combine → Render tree
- Layout → Calculate positions (reflow)
- Paint → Fill pixels (repaint)
- Composite → Layer composition
"Rendering process: parse HTML/CSS, build render tree, layout (reflow), paint (repaint), and composite layers."
Popular Engines
Blink · Gecko · WebKit · Trident
| Engine | Browsers |
|---|---|
| Blink | Chrome, Edge, Opera |
| Gecko | Firefox |
| WebKit | Safari |
| Trident | Old IE |
"Popular engines include Blink (Chrome/Edge), Gecko (Firefox), WebKit (Safari), and Trident (old IE)."
JavaScript Engines
V8 · SpiderMonkey · JavaScriptCore
| Engine | Browser |
|---|---|
| V8 | Chrome, Node.js |
| SpiderMonkey | Firefox |
| JavaScriptCore | Safari |
"JavaScript engines include V8 (Chrome), SpiderMonkey (Firefox), and JavaScriptCore (Safari)."
Parsing
HTML → DOM, CSS → CSSOM
<!-- HTML Parser -->
<div>Content</div>
→ DOM Node /* CSS Parser */ div { color: red; } → CSSOM Rule
"Parsers convert HTML to DOM tree and CSS to CSSOM tree, which are combined into the render tree."
Layout (Reflow)
Calculate element positions
Layout engine:
- Calculates element positions
- Determines sizes
- Handles box model
- Processes flexbox/grid
"Layout (reflow) calculates element positions and sizes based on CSS, box model, and layout algorithms."
Paint (Repaint)
Fill pixels with colors
Paint engine:
- Fills pixels with colors
- Applies styles (colors, backgrounds)
- Renders text
- Applies effects
"Paint (repaint) fills pixels with colors, backgrounds, and visual styles based on computed styles."
9️⃣ Composite
Combine layers
Composite:
- Combines painted layers
- Applies transforms/opacity
- GPU-accelerated
- Final screen output
"Composite combines painted layers, applies transforms/opacity, and produces the final screen output."
Performance Optimization
Minimize reflow and repaint
- Use CSS transforms (composite only)
- Batch DOM reads/writes
- Use will-change for animations
- Avoid layout-triggering properties
"Optimize rendering by minimizing reflow and repaint, using transforms, and batching DOM operations."
"Browser engines render web pages by parsing HTML/CSS, building render trees, calculating layout (reflow), painting pixels (repaint), and compositing layers. Popular engines include Blink (Chrome), Gecko (Firefox), and WebKit (Safari). JavaScript engines like V8 execute JavaScript. Optimize by minimizing reflow/repaint and using GPU-accelerated properties."
🧠 Ultra-Short Cheat Sheet
Rendering engine
Parse → Layout → Paint → Composite
Blink, Gecko, WebKit
V8, SpiderMonkey, JavaScriptCore
Reflow (layout)
Repaint (paint)
Composite (layers)