Better performance with javascript using Array, Object literal or JSON?

Question

I am having a dilemma as I need to choose the best performing option.

What I have now is a simple array like:

var array = [
   '/index1.html',
   '/index2.html',
   '/index3.html'
];

this array would contain around 60 options only but as I need to separate by language I am thinking of other options such as object literal or JSON format so it would contain all languages and around 1000 options.

var obj = {
            'en' : {
                'title' : 'bla',
                'url':'bla bla bla'                 
            },
            'de' : {
                'title' : 'bla',
                'url':'bla bla bla'                 
            },          
        };

The questions is what do you think would best perform for this? Thank you.

I really could but just thinking of the most common way and maybe this is the one... — devjs11, Feb 28 '14 at 16:48
if this is something that runs once, there's no performance advantage to either; choose what integrates the best into your application. — dandavis, Feb 28 '14 at 16:52
maybe this question [here](https://stackoverflow.com/questions/17295056/array-vs-object-efficiency-in-javascript) can help — Jalal, Jun 12 '17 at 11:23

ktm5124 · Accepted Answer · 2014-02-28T17:06:30.517

4

Object literal and JSON are the same thing (correction: see Quentin's comment)

IF you're searching for a value then JSON can have better performance because it's a hashmap implementation, so the lookup time would be O(1).

JSON is also more flexible, since you can have arrays in your JSON, you can have named keys, etc.

That said, I wouldn't worry about the performance gains here. They're probably negligible.

If you're trying to map your HTML pages to a language, you can either store the URL in a JSON keyed by language abbreviation ('en', 'de', etc.) or you could use a convention for naming your files (index-en.html, index-de.html). It's your choice.

edited Feb 28 '14 at 17:06

answered Feb 28 '14 at 16:42

ktm5124

11,861
21
74
119

4

JSON is a data format that is separate from, although heavily influenced by, JavaScript. It isn't the same as an object literal. – Quentin Feb 28 '14 at 16:44
i think what ktm means is that both a literal and JSON yield the same result if you pasted them after "var obj = " ... – dandavis Feb 28 '14 at 16:50
@Quentin Just curious, how does JSON differ from an object literal when used in JavaScript? – Mathias Feb 28 '14 at 16:50
1

When used in JavaScript, JSON is either loaded from an external file or is embedded inside a string literal (and has to be parsed with `JSON.parse`) – Quentin Feb 28 '14 at 16:52
I think he means that "object literal" is a JavaScript language feature, whereas JSON is a data format, and is abstracted from any particular language. It's a good distinction because plenty of languages use JSON. – ktm5124 Feb 28 '14 at 16:52
@Quentin Clarifying that... I meant JSON as data type and external file and nth else. Using JSON I would go with jQuery $.ajax and dataType : 'json'. With an object literal I would keep it somewhere inside and just do a thing with a normal javascript for loop. Something like that. – devjs11 Feb 28 '14 at 16:58
Since the OP is asking about performance, putting JSON in an external file would be a terrible idea. The HTTP request is expensive. – Quentin Feb 28 '14 at 17:04

score 2 · Answer 2 · edited Jun 18 '21 at 22:14

As of 2019, the recommended approach would be a single json string literal loaded into JSON.parse()

See this 2019 Chrome Dev Summit video: Faster apps with JSON.parse.

As long as the JSON string is only evaluated once, the JSON.parse approach is much faster compared to the JavaScript object literal, especially for cold loads. A good rule of thumb is to apply this technique for objects of 10 kB or larger — but as always with performance advice, measure the actual impact before making any changes.

The cost of parsing JSON(V8 Blog)

Per the benchmarks, for a large JSON file, the performance gains of JSON.parse over an object literal can be substantial (20% to 70%)

Better performance with javascript using Array, Object literal or JSON?

2 Answers2