Any advice on how much browser memory to use?

Question

I am writing an angular application, and I'm wondering how much client side memory to use.

I'm currently working on a scenario where there are 2 dropdowns. The second will load new values depending on the selection of the first. I'm thinking the max # of total records in the 2nd dropdown would be around 2000-3000 items, each being around 2k each. Each selection would display probably 10-15 items of the 2000-3000.

Should I load the entire array into memory and parse the selected values from there, or should I read from the server every time the first dropdown changes?

I know for a desktop this wouldn't be a big deal. But we support phones and tablets, and I'm not sure how much memory to worry about with these devices.

Answer 1

What you're describing is called a "cascading dropdown." It's commonly used by car websites to get Year, Make and Model.

I've seen a lot of these sites do an AJAX/JSON round trip for the sub-combos. There's a bit of a lag if you do this, unless it happens before the user opens the second dropdown. On a phone, I think you should probably do that instead of loading all of the items. Phone users are already used to things happening a bit more slowly.

In any case, make sure you can get the server to send only the 20 bytes per entry that you need for the dropdown. If you can't get it to do that, then taking the hit for all 2000 complete objects is probably out of the question (that's 4 megabytes, just for one page).