How much memory is too much when caching objects in the Browser?

Question

I'm fairly inexperienced in frontend engineering, so I apologize if this comes off as naive or too broad.

My app fetches 4k JSON objects via AJAX. To prevent repeated HTTP requests, the returned JSON is cached in an object within the global window scope. Are there any best practices regarding this sort of thing?

I realize that a reasonable limit on the size of the cache will depend on the the browser, the OS, hardware, and other factors. I'm on the look out for degraded UI responsiveness.

Are there any good rules of thumb, though?

Answer 1

This strongly depends on your task and large percent of users you would like to have.

If you have nice 3D game, then even 500MB would be ok (but not all for JSON cache)

Modern browsers require 50-100MB of memory from the start. Therefore 50MB for all your javascript objects should be ok in most cases and I suppose 50MB is large enough for any simple(twitter)/average(gmail) web app.

Also, RAM costs 5-7$ per GB now.

Keep in mind, that, 4k of stringified JSON will turn into 10-50kb in objects and even in string form will take almost 8k (If you use utf-8 for http transfer) since js engines uses UTF-16 for internal string representation.