CSS. Under the hood

Kasia Jastrzebska Frontend developer Mother of 5 (2 kids, 2
cats and a horse!) @kejt_bw

Set of golden rules A.k.a advices ;)

What happens when we open given url?

BROWSER FILES URL

<!DOCTYPE html> <html> <head> <link href="style.css" rel="stylesheet"> <title>Critical Path</title> </head>
<body> <p>Hello</p> <div>React Alicante</div> </body> </html> Our ﬁle

Bytes representation 3c 21 44 4f 43 54 59 50
45 20 68 74 6d 6c 3e 0a 3c 68 74 6d 6c 3e 0a 20 3c 68 65 61 64 3e 0a 20 20 20 3c 6c 69 6e 6b 20 68 72 65 66 3d 22 73 74 79 6c 65 2e 63 73 73 22 20 72 65 6c 3d 22 73 74 79 6c 65 73 68 65 65 74 22 3e 0a 20 20 20 3c 74 69 74 6c 65 3e 43 72 69 74 69 63 61 6c 20 50 61 74 68 3c 2f 74 69 74 6c 65 3e 0a 20 3c 2f 68 65 61 64 3e 0a 20 3c 62 6f 64 79 3e 0a 20 20 20 3c 70 3e 48 65 6c 6c 6f 3c 2f 70 3e 0a 20 20 20 3c 64 69 76 3e 52 65 61 63 74 20 57 65 65 6b 3c 2f 64 69 76 3e 0a 20 3c 2f 62 6f 64 79 3e 0a 3c 2f 68 74 6d 6c 3e 0a

< ! D O C T Y P E h
t m l > 3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 3e

Modeling DOM tree nodes html head body link title p
div Hello React Alicante

Javascript blocks HTML parsing by default Building DOM Building DOM
BLOCKED HTML fetch JS execute

While DOM parsing can be paused CSSOM needs to be
fully created

<!DOCTYPE html> <html> <head> <title>React App</title> <style type='text/css'> body {
background: red; } </style> </head> <body> <div id="root"></div> <style type='text/css'> .someClass { background: green; } </style> </body> </html> CSSOM is being build and DOM parsing is unblocked CSSOM is altered by a new one

body { font-size: 16px; } p { color: red; }
div { height: 300px; font-size: 14px; } div p { color: blue; } Our stylesheet

Modeling CSSOM tree nodes body div p p font-size: 16px;
font-size: 14px; height: 300px; font-size: 16px; font-size: 16px; color: red; font-size: 14px; color: red; color: blue;

What CSSOM tree building impacts CSSOM blocks the rendering All
script tags after stylesheets will be stopped from parsing/execution Critical render path is highly impacted by CSSOM building time

CSSOM blocks JS execution Building DOM Building DOM BLOCKED HTML
fetch JS BLOCKED fetch CSS CSS Build CSSOM Execute JS

Inform browser about css ASAP Golden rule #1

Speculative parser

Speculative parser Building DOM Building DOM BLOCKED HTML fetch JS
fetch CSS CSS Build CSSOM Execute JS

Don’t hide critical css Golden rule #2

@import 'src/modules/theme/variables-bootstrap'; @import 'src/_variables; @import 'src/modules/theme/variables-core'; @import 'src/modules/theme/mixins';

What can impact CSSOM tree building Downloading all external stylesheets
Javascript interactions with DOM elements style attribute and CSSOM api Size of CSS ﬁle

Extract critical styles to the top Golden rule #3

How JS execution time works Synchronous script tags have the
highest priority in download queue for browser Async script tags have lower priority and there is no guarantee that script will be executed after DomContentLoaded event, but they don’t wait for CSSOM Defer script tags will be executed after parsing HTML is done, but before DomContentLoaded

Use async for less important js assets Golden rule #4

Render tree html head body link title p div Hello
React Alicante body div p p font-size: 16px; font-size: 14px; height: 300px; font-size: 16px; font-size: 14px; color: red; font-size: 14px; color: red; color: blue;

Render tree body font-size: 16px; Hello React Alicante p div
font-size: 16px; font-size: 14px; height: 300px; font-size: 14px; color: red;

Calculate layout Hello React Alicante Paint & Composite Hello React
Alicante

Some of the CSS can require more work width, height,
top, left - requires layout to be recalculated, as those properties stand for geometry of element border-radius, box-shadow - combining these properties can triple the paint process time blur - it’s pretty fresh and very expensive operation for paint phase of rendering

Paint is the most expensive phase of rendering Golden rule
#5

But what about React?!

React does not have opinion on styling, except one

React style attribute a.k.a inline styles Accepts object of key
value properties which are camel cased Already protects us from XSS security holes and style properties collisions In the docs of react you will ﬁnd information that it’s not THAT performant - but WHY?

Case study - 5 elements CSS Classes Inline styles

Case study - 5000 elements CSS Classes Inline styles

Why the JS execution time differs that much?

for (propKey in lastProps) { ... if (propKey === STYLE)
{ const lastStyle = lastProps[propKey]; for (styleName in lastStyle) { if (lastStyle.hasOwnProperty(styleName)) { if (!styleUpdates) { styleUpdates = {}; } styleUpdates[styleName] = ''; } } } Empty all old style properties

// Unset styles on `lastProp` but not on `nextProp`. for
(styleName in lastProp) { if (lastProp.hasOwnProperty(styleName) && (!nextProp || !nextProp.hasOwnProperty(styleName))) { if (!styleUpdates) { styleUpdates = {}; } styleUpdates[styleName] = ''; } } When iterating over new props repeats the loop

// Update styles that changed since `lastProp`. for (styleName in
nextProp) { if (nextProp.hasOwnProperty(styleName) && lastProp[styleName] !== nextProp[styleName]) { if (!styleUpdates) { styleUpdates = {}; } styleUpdates[styleName] = nextProp[styleName]; } After that iterates over new styles and alternates

Keep inline styles minimal Golden rule #7

To sum up Deliver your assets as soon as possible
in small chunks Don’t hide CSS from your browser Use async and defer for javascript Use preload rel for your assets Think about ﬁle sizes!!! Avoid inline css - specially big objects of rules

What’s next? CSS Modules - to close scope of the
css classes Sass - for mixins and css variables Styled components - (for the very same reasons)

BE CURIOUS! @kejt_bw

Resources https://medium.com/@devdevcharlie/things-nobody-ever-taught-me-about-css-5d16be8d5d0e https://medium.com/@glenelkins/the-secrets-of-the-cssom-why-you-should-care-943a1d50307b https://www.sitepoint.com/optimizing-css-performance/ https://www.w3.org/TR/cssom-1/#the-elementcssinlinestyle-interface

CSS. Under the hood

CSS. Under the hood

Other Decks in Programming

Featured

Transcript