Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS. Under the hood

C3c9a7e30a525ee02a5ae24340ab824d?s=47 Kejt
September 27, 2019

CSS. Under the hood

C3c9a7e30a525ee02a5ae24340ab824d?s=128

Kejt

September 27, 2019
Tweet

Transcript

  1. None
  2. None
  3. Kasia Jastrzebska Frontend developer Mother of 5 (2 kids, 2

    cats and a horse!) @kejt_bw
  4. None
  5. None
  6. Set of golden rules A.k.a advices ;)

  7. What happens when we open given url?

  8. BROWSER FILES URL

  9. <!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 file
  10. 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
  11. < ! 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
  12. Modeling DOM tree nodes html head body link title p

    div Hello React Alicante
  13. Javascript blocks HTML parsing by default Building DOM Building DOM

    BLOCKED HTML fetch JS execute
  14. While DOM parsing can be paused CSSOM needs to be

    fully created
  15. <!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
  16. body { font-size: 16px; } p { color: red; }

    div { height: 300px; font-size: 14px; } div p { color: blue; } Our stylesheet
  17. 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;
  18. 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
  19. CSSOM blocks JS execution Building DOM Building DOM BLOCKED HTML

    fetch JS BLOCKED fetch CSS CSS Build CSSOM Execute JS
  20. Inform browser about css ASAP Golden rule #1

  21. <link rel="preload" href="style.css" as="style">

  22. Speculative parser

  23. Speculative parser Building DOM Building DOM BLOCKED HTML fetch JS

    fetch CSS CSS Build CSSOM Execute JS
  24. Don’t hide critical css Golden rule #2

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

  26. What can impact CSSOM tree building Downloading all external stylesheets

    Javascript interactions with DOM elements style attribute and CSSOM api Size of CSS file
  27. None
  28. Extract critical styles to the top Golden rule #3

  29. 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
  30. Use async for less important js assets Golden rule #4

  31. 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;
  32. Render tree body font-size: 16px; Hello React Alicante p div

    font-size: 16px; font-size: 14px; height: 300px; font-size: 14px; color: red;
  33. Calculate layout Hello React Alicante Paint & Composite Hello React

    Alicante
  34. 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
  35. Paint is the most expensive phase of rendering Golden rule

    #5
  36. But what about React?!

  37. React does not have opinion on styling, except one

  38. 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?
  39. Case study - 5 elements CSS Classes Inline styles

  40. Case study - 5000 elements CSS Classes Inline styles

  41. Why the JS execution time differs that much?

  42. 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
  43. // 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
  44. // 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
  45. Keep inline styles minimal Golden rule #7

  46. 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
  47. 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)
  48. BE CURIOUS! @kejt_bw

  49. 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