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 full-size slide

  2. Future of performance


    tooling
    High speed web
    Optimizing X for performance

    View full-size slide

  3. Monorepos
    Monorepos make


    things faster as well,


    you know…

    View full-size slide

  4. TTI
    FCP
    TBT
    LCP
    LSD NBA

    View full-size slide

  5. STATIC WEBSITES
    STATIC WEBSITES

    View full-size slide

  6. SSR
    SSR
    Server side

    View full-size slide

  7. LAZY LOADING
    LAZY LOADING

    View full-size slide

  8. HYDRATION
    HYDRATION

    View full-size slide

  9. PARTIAL HYDRATION
    PARTIAL HYDRATION

    View full-size slide

  10. ISLANDS
    ISLANDS

    View full-size slide

  11. WEBSITE AFTER INITIAL LOAD
    WEBSITE AFTER INITIAL LOAD

    View full-size slide

  12. BATTLE TESTED
    BATTLE TESTED

    View full-size slide

  13. MUTATIONS ARE


    BAD

    View full-size slide

  14. NOT ALWAYS, THOUGH

    View full-size slide

  15. Repetitio est mater stu…

    View full-size slide

  16. “NO CODE IS

    ALWAYS FASTER


    THAN ANY CODE”

    - ME

    View full-size slide

  17. ARRAYS VS
    OBJECTS

    View full-size slide

  18. LOOKUP TABLES

    View full-size slide

  19. MAPS VS HASHMAPS
    MAPS VS HASHMAPS

    View full-size slide

  20. HIGHER ORDER FUNCTIONS
    HIGHER ORDER FUNCTIONS

    View full-size slide

  21. PERFORMANCE

    DETECTION
    PERFORMANCE

    DETECTION

    View full-size slide

  22. CONSOLE.TIME 4 THE WIN

    View full-size slide

  23. THE BUTTERFLY EFFECT:


    HOW WE GAVE THE LINTER A 100X BOOST


    THE BUTTERFLY EFFECT:


    HOW WE GAVE THE LINTER A 100X BOOST


    View full-size slide

  24. KNOW YOUR LOOPS


    MUTATE WHEN EVER POSSIBLE


    USE ARRAYS AND MAPS SMARTLY


    AVOID HOF WHEN PERFORMANCE MATTERS


    SKIP UNNECESSARY DATA


    View full-size slide

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

    View full-size slide