From 120 to 800 MB of RAM usage in 5 minutes

(totally not a click bait)

Performance - INDUSTRY STAnDARDS (?)

image src & read more at:
https://developers.google.com/web/fundamentals/performance/rail

what if your users spend hours, days, or even weeks without page reload?

WHAT If your app does that

memory leak- WHY?

not removed event listeners, RxJS subscriptions, endless state updates, timers ...
references kept in closure
circular references*
detached and not destroyed HTML nodes
overusing global scope

*circular references aren't the case in Mark and Sweep algorithm,

but there are edge cases for JS + DOM

https://www.ibm.com/developerworks/web/library/wa-memleak/wa-memleak-pdf.pdf

speaking of which...

Profiling

https://developers.google.com/web/tools/chrome-devtools/memory-problems/

profiling

performance monitor

docs:
https://webplatform.github.io/docs/apis/timing/properties/memory/

memory api

    
    // window.performance.memory
   
    {
      totalJSHeapSize: 29400000,
      usedJSHeapSize: 15200000,
      jsHeapSizeLimit: 1530000000
    }

only in Chrome
requires flag
--enable-precise-memory-info

synthetic memory tests

Memory snapshots

you can even ask your clients to send you a snapshot and analyze it ❤️

Memory snapshots comparison

przyklad, omowic retained vs shallow size

you can even ask your clients to send you their snapshots

🙈

it kinda felt like this

syntH. memory tests - before

syntH. memory tests - AFTER

real user

measurements

calculations are only approximate
yet another task that would slow down code execution on client's side

Manually calculate memory allocated on heap but:

image source:
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

long tasks

read more at:
https://w3c.github.io/longtasks


    const observer = new PerformanceObserver((list) => {
        const perfEntries = list.getEntries();
    
        // queue reporting for long tasks existance
    });
    
    observer.observe({entryTypes: ["longtask"]});
    
    // long task refers to occurrences of event loop tasks
    // or pauses caused by UI thread work
    // whose duration exceeds 50ms

long tasks

No Firefox and Safari support
You can get the idea of what's happening in general

fin