Question

For maximum load speed and page efficiency, is it better to have:

1. An 18MB JSON file, containing an array of dictionaries, that I can load and start using as a native JavaScript object (e.g. var myname = jsonobj[1]['name']).
2. A 4MB CSV file, that I need to read using the jquery.csv plugin, and then use lookups to refer to: var nameidx = titles.getPos('name'); var myname = jsonobj[1][nameidx]).

I’m not really expecting anyone to give me a definitive answer, but a general suspicion would be very useful. Or tips for how to measure – perhaps I can check the trade-off between load speed and efficiency using Developer Tools.

My suspicion is that any extra efficiency from using a native JavaScript object in (1) will be outweighed by the much smaller size of the CSV file, but I would like to know if others think the same.

Answer 1

What is your situation? Are you writing some intranet site where you know what browser users are using and have something like a reasonable expectation of bandwidth, or is this a public-facing site?

If you have control of what browsers people use, for example because they’re your employees, consider taking advantage of client-side caching. If you’re trying to convince people to use this data you should probably consider breaking the data up into chunks and serving it via XHR.

If you really need to serve it all at once then:

1. Use gzip
2. Are you doing heavy processing of the data on the client side? How many of the items are you actually likely to go through? If you’re only likely to access fewer than 1,000 of them in any given session then I would imagine that the 14MB savings would be worth it. If on the other hand you’re comparing all kinds of things against each other all the time (because you’re doing some sort of visualization or… anything) then I imagine that the JSON would pay off.

In other words: it depends. Benchmark it.