Comparison of efficiency in declaring JSON data using JSON.parse versus an object literal

Question

Comparison of efficiency in declaring JSON data using JSON.parse versus an object literal

In a recent video from the 2019 Chrome Dev Summit titled "Boosting App Speed with JSON.parse", it was revealed that utilizing JSON.parse with a string literal instead of an object literal can result in a significant enhancement in speed. The official Google JSON.parse benchmarks clearly display a notable difference between the two approaches.

//Representing data using JS object literal
const info = { name: "John", age: 30 }; // 🐌

//Using JSON.parse for faster performance
const info = JSON.parse('{"name":"John","age":30}'); // 🚀

When working with JSON in JavaScript, are there any drawbacks to relying on JSON.parse over an object literal? Is it advisable to always define JSON data using JSON.parse method?

javascript json performance parsing object-literal

Answer 1

Answer №1

Using JSON.parse to parse a JSON string is beneficial as it returns an object, similar to what you get from an object literal.

When deciding between using an object literal versus JSON.parse, consider the following:

If the JSON string is only evaluated once, using JSON.parse is much quicker than using a JavaScript object literal, especially during cold loads. It's generally recommended to use this approach for objects larger than 10 kB — however, always test the actual performance impact before implementing any changes.

Source:

Answer 2

Using JSON.parse to parse a JSON string is beneficial as it returns an object, similar to what you get from an object literal.

When deciding between using an object literal versus JSON.parse, consider the following:

If the JSON string is only evaluated once, using JSON.parse is much quicker than using a JavaScript object literal, especially during cold loads. It's generally recommended to use this approach for objects larger than 10 kB — however, always test the actual performance impact before implementing any changes.

Source:

Answer 3

Answer №2

A MUST-READ!

While it is commonly believed that JSON.parse is faster, this may not always be the case when dealing with small objects.

/* JSON.parse */
start = new Date();

for(i=0; i<1000000; i++){ //creating from JSON
const miniObjectFromJson = JSON.parse('{"foo":42,"bar":1337}');
}
end = new Date()
timeGap = end - start; //457

/* JS object literal */
start = new Date()

for(i=0; i<1000000; i++){ //creating from JS Object Literal
const miniObjectFromLiteral = { foo: 42, bar: 1337 };
}
end = new Date()
timeGap = end - start; //9

The difference in performance can be significant, sometimes as much as tens of times.

Your conclusions may only be influenced by cases where the object size is massive, at least 8Mb.

Reference: https://www.youtube.com/watch?v=ff4fgQxPaO0

Answer 4

A MUST-READ!

While it is commonly believed that JSON.parse is faster, this may not always be the case when dealing with small objects.

/* JSON.parse */
start = new Date();

for(i=0; i<1000000; i++){ //creating from JSON
const miniObjectFromJson = JSON.parse('{"foo":42,"bar":1337}');
}
end = new Date()
timeGap = end - start; //457

/* JS object literal */
start = new Date()

for(i=0; i<1000000; i++){ //creating from JS Object Literal
const miniObjectFromLiteral = { foo: 42, bar: 1337 };
}
end = new Date()
timeGap = end - start; //9

The difference in performance can be significant, sometimes as much as tens of times.

Your conclusions may only be influenced by cases where the object size is massive, at least 8Mb.

Reference: https://www.youtube.com/watch?v=ff4fgQxPaO0

Comparison of efficiency in declaring JSON data using JSON.parse versus an object literal

Answer №1

Answer №2

Similar questions

The only numbers that can be typed using Typescript are odd numbers

Generating JSON output in PHP

Is it necessary to re-export a module after modifying an attribute in it in JS/ES6?

Problem with Jquery hover or mouse enter show/hide functionality

Alert: VirtualizedList warns of slow updates for a large list despite optimized components

What is the best way to create this json using Java programming?

Efficiently handling multiple form submissions using a single jQuery Ajax request

Reconstruct complete picture from IIIF JSON data

Transitioning to Vue 3: [Vue warning]: Prop already has a computed property named "actions"

effectively showcasing information in a datatable by converting JSON data into objects

I have a query regarding the load function and JSON

What content appears post-iframe?

How can a function in one React component be invoked from another component?

Converting intricate JSON data to Gson format

how to execute Vue-Js method just one time

You are unable to assign a string value instead of an object when making multiple selections

Tutorial on inserting a picture into muidatatables

Each time the Angular children component is reloaded, the user is redirected to localhost:4200

JavaScript: How to Build a Digital Grocery List with Browser Storage

Interact with a React dropdown using SeleniumBase