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

The other JavaScript performance (no one is talking about)

The other JavaScript performance (no one is talking about)

Performance topic is very trendy right now. Chance is you already heard it - use lazy loading, prefetch everything, use partially hydrated server-side rendered static islands. Ship zero bytes of JavaScript! But what if your code is not run in the browser or performance doesn't depend on the HTTP?

This talk will share several (un)conventional tricks you can apply to speed up the application when the size of your data grows. I will show you how to measure performance and squeeze out those last excessive milliseconds.

Learn how "usual bad practices" can become your ally when battling performance.

Miroslav Jonaš

November 29, 2022
Tweet

More Decks by Miroslav Jonaš

Other Decks in Technology

Transcript

  1. MIROSLAV JONAŠ
    MIROSLAV JONAŠ
    (no one is talking about)
    THE OTHER JAVASCRIPT
    PERFORMANCE
    THE OTHER JAVASCRIPT
    PERFORMANCE
    (no one is talking about)
    ViennaJS, 11/22
    ViennaJS, 11/22
    @meeroslav
    @meeroslav

    View Slide

  2. Future of performance


    tooling
    High speed web
    Optimizing X for performance

    View Slide

  3. Monorepos
    Monorepos make


    things faster as well,


    you know…

    View Slide

  4. TTI
    FCP
    TBT
    LCP
    LSD NBA

    View Slide

  5. STATIC WEBSITES
    STATIC WEBSITES

    View Slide

  6. SSR
    SSR
    Server side

    View Slide

  7. LAZY LOADING
    LAZY LOADING

    View Slide

  8. HYDRATION
    HYDRATION

    View Slide

  9. PARTIAL HYDRATION
    PARTIAL HYDRATION

    View Slide

  10. ISLANDS
    ISLANDS

    View Slide

  11. View Slide

  12. WEBSITE AFTER INITIAL LOAD
    WEBSITE AFTER INITIAL LOAD

    View Slide

  13. BATTLE TESTED
    BATTLE TESTED

    View Slide

  14. View Slide

  15. View Slide

  16. 1
    2
    3 4

    View Slide

  17. MUTATIONS ARE


    BAD

    View Slide

  18. NOT ALWAYS, THOUGH

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. Repetitio est mater stu…

    View Slide

  23. ?

    View Slide

  24. View Slide

  25. View Slide

  26. “NO CODE IS

    ALWAYS FASTER


    THAN ANY CODE”

    - ME

    View Slide

  27. ARRAYS VS
    OBJECTS

    View Slide

  28. A_RAY

    View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. LOOKUP TABLES

    View Slide

  34. View Slide

  35. View Slide

  36. MAPS VS HASHMAPS
    MAPS VS HASHMAPS

    View Slide

  37. View Slide

  38. HIGHER ORDER FUNCTIONS
    HIGHER ORDER FUNCTIONS

    View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. PERFORMANCE

    DETECTION
    PERFORMANCE

    DETECTION

    View Slide

  44. JSBENCH.ME

    View Slide

  45. View Slide

  46. CONSOLE.TIME 4 THE WIN

    View Slide

  47. THE BUTTERFLY EFFECT:


    HOW WE GAVE THE LINTER A 100X BOOST


    THE BUTTERFLY EFFECT:


    HOW WE GAVE THE LINTER A 100X BOOST


    View Slide

  48. KNOW YOUR LOOPS


    MUTATE WHEN EVER POSSIBLE


    USE ARRAYS AND MAPS SMARTLY


    AVOID HOF WHEN PERFORMANCE MATTERS


    SKIP UNNECESSARY DATA


    View Slide

  49. View Slide

  50. MIROSLAV JONAŠ
    MIROSLAV JONAŠ
    THE OTHER JAVASCRIPT
    PERFORMANCE
    THANK YOU!
    ViennaJS, 11/22
    ViennaJS, 11/22
    @meeroslav
    @meeroslav

    View Slide