Tags To Pixels
SIddhant
@callmesiddhant
siddhantm1998@gmail.com
Frontend at Nirvana Tech
QUESTION
Who renders the pixels on the screen?
HTML/CSS
GPU
Rendering
CONTENT (HTML/CSS)
PIXELS
Content
CONTENT
Sandbox
BLINK ENGINE
CHROMIUM
COMPOSITER
PIXELS
HTML/CSS
OPEN GL
GPU
OS
OUR GOAL IS TO CONVERT "CONTENT" TO OPEN GL CALLS
GOALS
CONVERT CONTENT TO PIXELS
CREATE DATA STRUCTURES FOR EFFECIENT UPDATIONS
PARSING
Converting HTML to DOM
PARSING
<div>
<p>Hello World</p>
</div>HTML DOCUMENT PARSER
HTML TREE BUILDER
DOCUMENT
HTML
BODY
DIV
P
HELLO WORLD
DOM
DOM acts as internal representation for blink
API in JavaScript to work with DOM
⚡️ Shadow DOM
DOCUMENT
HTML
BODY
DIV
P
HELLO WORLD
V8
JS QUERIES
BINDINGS
STYLES
p {
color: pink
}Style Rule Application
DOCUMENT
HTML
BODY
DIV
P
HELLO WORLD
Styles
This process is done for every stylesheet active and creates an object model called CSSOM
div.foo{
background: blue;
color: red !important;
}
p{
color: pink
}StyleSheet Contents
Style Rule
Style Rule
CSS PARSER
Property()
Text
Value()
Styles
* CHECK COMPUTED TAB IN DEV TOOLS
DOCUMENT
HTML
BODY
DIV
P
HELLO WORLD
+
+
Style Resolver
Style Sheet Contents
Computed Style Sheet*
Computed Style has style info for each and every node
LAYOUT
x : 10
y : 10
height : 30px
width:30px
LAYOUT
- BLOCK FLOW ( TOP TO BOTTOM)
- INLINE FLOW (LEFT TO RIGHT)
LAYOUT
Calculate How Text Flows (HarfBuzz)
LAYOUT
⚡️ Shadow Roots and LayoutNGMixins
DOCUMENT
HTML
BODY
DIV
P
HELLO WORLD
Layout View
LayoutBlockFlow
LayoutBlockFlow
LayoutBlockFlow
LayoutText
LayoutBlockFlow
DOM Tree
Layout Tree
Layout View
LayoutBlockFlow
LayoutBlockFlow
LayoutBlockFlow
LayoutText
LayoutBlockFlow
Layout Tree
LAYOUT
Physical Fragement Tree
(includes line and content breaks
Layout View
LayoutBlockFlow
LayoutBlockFlow
LayoutBlockFlow
LayoutText
LayoutBlockFlow
Layout Tree
PAINT
Next we create Paint OPS
These are just operations and not executed yet!
LayoutObject
paint()
Paint Artifact
DisplayItem
DisplayItem
DrawRectangleWithCoords(coords)
DrawTextBlockWithCoords(coords)
PAINT
Paint uses stacking order and happens in phases
- Different from DOM Order
- Can be controlled using z index
BACKGROUNDS
FLOATS
FOREGROUND
OUTLINES
PAINT
PaintOP example
RASTER
Rasterization turns PaintOps into Bitmaps in memory (GPU memory , Read Hardware Accelerated Rasterization)
Raster also converts images into bitmaps
RASTER
But wait, there's a problem
You can't issue OS calls from inside a sandbox
BITMAP
RASTER
PAINT OP
OPEN GL Commands
GPU
Transfer Paint Ops from sandbox to GPU process via IPC
PaintOPs are wrapped inside command buffer
DIrectX
For Windows
OPEN GL COMMANDS
Angle
DirectX
Review
DOM
Style
Layout
Paint
Raster
GPU
And THEN THERE WERE PIXELS!
⚡️ How dynamic rendering works!
WE ARE HIRING!
https://github.com/Rishabhpawar1409
SHOUTOUTS
Looking for Frontend Intern roles
@Rishsome1409
https://github.com/bablysingh2409
@BablyRajput
@CallMeSiddhant