Big Data, Zero JS�Cross-Browser Virtual Scrolling�CONTAIN & CONTENT-VISIBILITY
when you want to center a div in chrome
contain: paint
contain: layout
content-visibility: auto
contain: content
contain: strict
Layout
Hit Test
Recalc Style
Event
<
Paint
Composite
runtime
Drastic performance impact with latest CSS features
bootstrap
before
after
Michael Hladky / @Michael_Hladky
CEO / GDE for Angular, MVP, Nx Champion
push-based.io
Improve Web Performance
Scale productivity with Nx
Architect with JS & Angular
browser render waterfall
Layout
Recalc Style
Event
<
Paint
Composite
<
{ }
<
🔁
Scripting
{ }
Recalculate Styles
calculate
Recalc Style
Event
<
introduce changes to DOM or styles
apply CSS to the related DOM
on UI interaction map to DOM nodes
Layout
Hit Test
Layout
Hit Test
calculate the nodes dimensions
Paint
Composite
Paint
Composite
compute overlaps of the layers
fills pixels on layers
Browser
Layout
Hit Test
Recalc Style
Event
<
Paint
Composite
<
{ }
<
🔁
render
pipeline
<
render performance concepts
border-box
visible boundary
screen viewport
limit�paint area
reduce nodes �to layout
skip recalc styles for
offscreen nodes
CSS:
Triggers
Full Page: Trigger
Test: Setup
contain: layout | paint | size | style�content | strict
contain: layout
contain: paint
contain: size
border-box is the �visible boundary
layout relative�to border-box
border-box requires �dimensions
contain: layout
performance impact
skip child nodes �from layouting
contained nodes
offscreen nodes
shield from �outer layout
contains inner layouting
contain: layout
design impact
layout relative�to border-box
absolute nodes
contained nodes
relative position �form container
new stacking-context
for children
contain: layout
z-2
z-1
The Drawback: Of Layout
Test: Layout impact
the target nodes DOM contains only layout work, the example contains a trigger which effects only layout properties, the measure is performed in 3 steps form none to layout and one with layout and all nodes offscreen
contain: layout - lab measurement
onscreen
offscreen
11ms Update Layer Tree
0,5ms Update Layer Tree
0,5ms Update Layer Tree
unoptimized
contain: paint
performance impact
contained nodes
obscured nodes
offscreen nodes
shield from �outer paint
reduces paint area by cutting edges
skip invisible nodes from paint
contain: paint
paint area reduced �to border-box
offscreen container
skip out of viewport�nodes from paint
design impact
visible area
cuts paint area �at border-box
contain: paint
border-box is the �visible boundary
The Drawback: Of Paint
Test: Paint impact
the target nodes DOM contains only paint work, the example contains a trigger which effects only paint properties, the measure is performed in 3 steps form none to paint and one with paint and all nodes offscreen
6.00ms Paint
1.00ms Paint
0.15ms Paint
unoptimized
onscreen
offscreen
contain: paint - lab measurement
contain: size
performance impact
contained nodes
ignores nodes
for size calculation
contain: size
border-box requires �dimensions
design impact
static dimensions
container dimensions
collapse
border-box requires �dimensions
contain: shorthands
contain: content
contain: strict
contain:�layout paint size
contain:�layout paint
contain: layout paint size
Value | Usage | Impact | Layout Root | Overflow | Dimensions |
none | n/a | n/a | document | visible | optional |
layout | easy | ++ | node | visible | optional |
paint | moderate | + | node | hidden | optional |
size | hard | ~ | document | visible | required |
Shorthands | |||||
content | moderate | +++ | node | hidden | optional |
strict | hard | +++~ | node | hidden | required |
Viewport Concepts
<body>
<card>
<card>
<card>
<list>
<card>
<card>
<card>
<card>
above the fold�(onscreen nodes)
visual boundary
<card>
<card>
below the fold�(offscreen nodes)
offscreen
obscured
render performance concepts
viewport
viewport observation
size observation
track visibility �of nodes
skip recalc styles for
offscreen nodes
track dimensions �of nodes
content-visibility: auto|hidden�contain-intrinsic-size: px|auto
performance impact
contained nodes
nodes layout benefits
from contain
content-visibility: auto
border-box requires �dimensions offscreen
offscreen nodes
ignores nodes
outside the viewport
contained nodes
nodes paint benefits
from contain
design impact
static dimensions
border-box requires �dimensions offscreen
content-visibility: auto
ignores nodes
outside the viewport
6.00ms Paint
1.00ms Paint
0.1ms Paint
unoptimized
onscreen
offscreen
11ms Update Layer Tree
0,5ms Update Layer Tree
61 μs Update Layer Tree
content-visibility: auto - lab measurement
content-visibility: auto
contain-intrinsic-size: px
Value | Usage | Impact Onscreen | Impact Offscreen | Layout Root | Overflow | Dimensions |
none | n/a | n/a | n/a | document | visible | optional |
auto | moderate | ++ | +++ | node | hidden | required |
Value | Usage | Dimensions Onscreen | Dimensions�Offscreen | Impact |
none | n/a | n/a | n/a | n/a |
px | easy | n/a | given value | stable scrollbar |
Demo: Measurement
Unoptimized - bootstrap
Add DOM nodes
offscreen paint / layout of images
layout
hit test, paint , composite
Recalculate styles
Optimized - bootstrap - inc. offscreen nodes
Recalculate styles, hit test, layout, paint ,composite
NO offscreen paint / layout of images
Add DOM nodes
Unoptimized - runtime - inc. offscreen nodes
animation
bootstrap
Optimized - runtime - inc. offscreen nodes
animation
bootstrap
Thanks for Your Time!�Need Help? Just Ping Me!
Michael Hladky / @Michael_Hladky
CEO / GDE for Angular, MVP, Nx Champion
push-based.io
CI | Performance | Architecture