No content

No content

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

No content

No content

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

What happens when we open given url? 

BROWSER FILES URL 

Critical Path

Hello

Our file 

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 

React App body { background: red; } .someClass { background: green; } 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 file 

No content

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 find 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 file 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