HomeTutorsContact
JavaScript
How to get device memory using JavaScript?
Gulshan Saini
May 27, 2020
1 min

Internet consumption from developing countries has already surpassed developed countries. However, this brings a challenge for web developers. We have developed the content targetting the high-end devices(or maybe, we haven’t thought about targetting at all). Serving the same content on low-end devices brings the following challenges

  • The page might take more than 30 seconds to load - ideally, the page should be ready under 3 seconds
  • Browser tab hangs and user close the window in frustration
  • The page might become unresponsive

Considering, all the above scenarios, it makes sense to load only critical features or components to give a smooth web experience. It would be great if we know the user’s device memory and load the lite version of our application.

So, how do we achieve this?

navigator.deviceMemory returns the approximate amount of device memory in gigabytes. The upper bound value returned by navigator.deviceMemory is 8GiB and the lower bound is 0.25GiB.

Below, is the formula that is used for calculation (source: MDN)

This value is an approximation given by rounding down to the nearest power of 2 and dividing that number by 1024.

This means you won’t get the exact details of device memory to protect user privacy however you will get nearby values to serve optimized content.

The following table illustrates some examples: (source: w3c)

navigator.deviceMemory examples
navigator.deviceMemory examples

A full list of possible values is as follows: 0.25, 0.5, 1, 2, 4, 8

After, detecting the deviceMemory we can load the components dynamically or even load lite version of the application as follows

Browser support

deviceMemory is an experimental feature and should be used with caution in production. Below is a screenshot from caniuse showing the browser support as of May 2020.

navigator.deviceMemory browser support
navigator.deviceMemory browser support

To be on the safe side, you can even use browser feature detection logic as follows


Tags

#performance
Previous Article
How to get last modified date of a file using Node.js?

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to Get Current Date in Human Readable Form in JavaScript?
October 03, 2020
1 min
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media