Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

What happens when we open given url?

Slide 8

Slide 8 text

BROWSER FILES URL

Slide 9

Slide 9 text

Critical Path

Hello

React Alicante
Our file

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

< ! 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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

React App body { background: red; }
.someClass { background: green; } CSSOM is being build and DOM parsing is unblocked CSSOM is altered by a new one

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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;

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Inform browser about css ASAP Golden rule #1

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Speculative parser

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Don’t hide critical css Golden rule #2

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Extract critical styles to the top Golden rule #3

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Use async for less important js assets Golden rule #4

Slide 31

Slide 31 text

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;

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Calculate layout Hello React Alicante Paint & Composite Hello React Alicante

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

But what about React?!

Slide 37

Slide 37 text

React does not have opinion on styling, except one

Slide 38

Slide 38 text

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?

Slide 39

Slide 39 text

Case study - 5 elements CSS Classes Inline styles

Slide 40

Slide 40 text

Case study - 5000 elements CSS Classes Inline styles

Slide 41

Slide 41 text

Why the JS execution time differs that much?

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

// 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

Slide 44

Slide 44 text

// 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

Slide 45

Slide 45 text

Keep inline styles minimal Golden rule #7

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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)

Slide 48

Slide 48 text

BE CURIOUS! @kejt_bw

Slide 49

Slide 49 text

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