CODEWITHSUNDEEP
javascriptperformancegoogle-chromew3cwebapi
Ashwanth A.R
Ashwanth A.R

Reputation: 229

How do I use performance.measureMemory() API for frontend observability?

I am looking to track the memory consumption of our application / web page over fixed intervals on different clients. My team would like to observe this metric in understanding if any new feature roll outs have significant impact to the memory consumed by the app and rollback the feature if it does so.

I've read up on these sources:

  1. https://web.dev/monitor-total-page-memory-usage/
  2. https://trackjs.com/blog/monitoring-javascript-memory/
  3. https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory
  4. https://wicg.github.io/performance-measure-memory/
  5. https://github.com/WICG/performance-measure-memory

First, if we look at the old API: window.performance The user must enable accurate memory monitoring by starting Chrome with the "--enable-precise-memory-info" flag. To me, it doesn't seem reasonable to expect our users to run Chrome with this flag.

I also read that this API could over or under measure the memory consumption because it measures the size of the JavaScript Heap which could be incorrect if there are iframes or service workers which start a different heap or if there are any large web pages that are on the same heap.

Because of these two reasons, this option is not a valid option (imo) for the goal of frontend observability on real clients in production.

Second, if we look at the new API: performance.measureMemory().

It is only available via an origin trial till Jan, 2021 (as per what the form told me when I signed up for a token).

Beyond local profiling on dev machines, this seems to be the only alternative at the moment to achieve what I'm looking to achieve above (or am I mistaken in my assumption?).

I have two questions regarding the usage of the API:

  1. Do we have any alternatives after Jan 2021 (would this not be available after Jan)?
  2. I can test this on my local by enabling the flag: #enable-experimental-web-platform-features without any issues. I have an origin trial token and if I add this as a meta tag to my index.html, do my users need any flags enabled on their browser in order for us to observe this?

Upvotes: 3

Views: 2424

Answers (1)

Ashwanth A.R
Ashwanth A.R

Reputation: 229

I reached out to the editor of the measure memory API w3c specification who was kind enough to get back to me with a prompt response.

I am now posting the answers I got on email here, in case someone else comes looking for this:

  1. Do we have any alternatives after Jan 2021 (would this not be available after Jan)?

We are planning to ship it in Chrome 89. Due to security reasons it will be guarded by the self.crossOriginIsolated. The version that is currently shipping in the origin trial doesn't require cross-origin isolation.

  1. I can test this on my local by enabling the flag: #enable-experimental-web-platform-features without any issues. I have an origin trial token and if I add this as a meta tag to my index.html, do my users need any flags enabled on their browser in order for us to observe this?

If you add the meta-tag, then the users don't need any flags. Note that without --enable-blink-features='ForceEagerMeasureMemory' it may take a while (up to 20seconds) until the promise with the result resolves. That's because the API waits until the next garbage collection to perform the measurement.

Upvotes: 3

Related Questions