# Life of A Pixel
# Browser facts
- Both HTML and XML are descendents of SGML specification (opens new window)
- XML came after HTML
- Website = 1k+ lines of HTML, CSS and JS (wasm these days)
WebContentsis sandboxed, so that other webpages cannot access other pages- Rendering and pixels, low level APIs?
- What are the lifecycyle stages of rendering pipeline?
- shadownDOM vs DOM tree
- DOM is linked together into a tree DS using pointers
- What is the js main thread? (opens new window)
# Browser Components
- User Interface
- Browser Engine
- Rendering Engine
- Netwroking
- JS Engine, Interpreter
- UI Backend
- Data Persistance
Parsing -> Render Tree -> Layout -> Paint
Parsing
Translating a document into a structure that a code can use
- Lexical ANalysis
- Syntax ANalysis
- Lexer (Tokenizer)
- Parser
Readymade Examples: Flex, Lex, Yacc, Bison
# Stages
Each stage has its own data structures to work with it.
- HTML parsing to low level
C++objects - CSS parsing
- JS parsing and execution sent to JS Engine main thread for execution
- Visual Gemmetry computation - Layout Object Tree,
layoutNG - PaintOps are in memory but have execued yet, Raster executes PaintOps
- Rasterization = Paint Objects to in-memory pixel instructions to gpu,
openGL,directX,vulcan - Rendered generates Frames/Sec
Layers of Abstraction
- DOM
- style
- layout
- paint
- raster
- GPU
- Pixel
But its changing, Animation Frames 60Hertz, even when doing dynamic interaction else jankey
How to do som much compuation 60 times / sec? in rendering pipeline?
Animation Pipelines are optimized using compositing. Instaead of rasterizing the whole area which CSS has changed, create a layer and move the bitmap using GPU
compositor thread gets the first crack at handling things when user interacts/changes browser state. Else, its gets forwarded to js main thread task queue and gets executed whevver its free
# Event Loops
- shodow DOM
- stack and heap Memory, web APIs,
- Queues [Rendering queues and Callback queues]