Faster apps with JSON.parse (Chrome Dev Summit 2019)
Why Stack Overflow recommends it
Stack Overflow users link it when answering or questioning whether JSON.parse beats an object literal for large inline data, and as the source for the 10 kB rule of thumb.
Recommended by 3 people across 2 different months, 2019 to 2023.
What it is
A short Chrome Dev Summit 2019 talk by Mathias Bynens explaining that JSON's simpler grammar lets engines parse it faster than equivalent JavaScript object literals. He shows how wrapping large config or Redux-style initial state in JSON.parse can improve start-up performance in web apps.
What people said
Strong rec NiRUS · 2019-11 · Stack Overflow · on “How to deep copy a custom object in JavaScript?”
A quick method to clone objects deep with performance into consideration. JSON.parse(JSON.stringify({"foo":"bar"})) How about performance ? >> [ May be this is the best way to deep copy objects ]. I strongly recommend you to checkout this video from Google Chrome Developers [this video] community on Youtube explaining how this method works and performance benchmarks. Note: Use the JSON.parse method if your objects don't have Dates, functions, undefined, Infinity, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays, Typed Arrays or other complex types. Source : Read this SO answer [LINK] Quick tip - React.JS [LINK] initial state tree can be loaded from localStorage using this solution
Recommends Danmoreng · 2019-11 · Stack Overflow · on “What is the suggested way to deal with big table in PAC file?”
I don't quite understand what you mean by a "preprocess pass" of the table? Of course the check if the called domain is in the whitelist or not has to be done every time? The only performance improvement which comes to my mind here is something I watched very recently: using JSON.parse for the data: [this video]
Recommends Eugene · 2019-12 · Stack Overflow · on “Better performance with javascript using Array, Object literal or JSON?”
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 [this video] . 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 [LINK] (V8 Blog) Per the benchmarks [LINK] , for a large JSON file, the performance gains of JSON.parse over an object literal can be substantial (20% to 70%)
Cites Zerium · 2019-12 · Stack Overflow · on “Apparently JSON.parse is faster than declaring an object literal. If that's the case, why are my results showing otherwise?”
According to this video [this video] released on the Google Chrome Developers YouTube channel, JSON.parse is actually faster than an object literal. I decided to put that to the test, and my results heavily favour object literals, time and time again. See here: [LINK] Also see here: [LINK] (you can run this in Node.js) My results consistently show object literal parsing as taking about 75% less time than JSON.parse . Is the video wrong, or are my tests not a fair representation of the scenario outlined within the video?
Cites Onosa · 2019-12 · Stack Overflow · on “How to use Html.Raw(Json.Encode(Model)) properly?”
While unintuitive, using JSON.parse will be faster here. For example, `var obj= JSON.parse('@Html.Raw(Json.Encode(Model))');` Source: [this video]
Cites Eugene · 2019-12 · Stack Overflow · on “Performance of declaring json - JSON.parse vs object literal”
According to the 2019 Chrome Dev Summit video, "Faster apps with JSON.parse" [this video] , using JSON.parse with a string literal instead of declaring the json through an object literal results in a noticeable speed improvement. The google JSON.parse benchmarks [LINK] show a major difference between the two. //JS object literal const data = { foo: 42, bar: 1337 }; // //JSON.parse 20%+ faster const data = JSON.parse('{"foo":42,"bar":1337}'); // When declaring json in javascript, are there any downsides of using JSON.parse instead an object literal? Should json always be declared using the JSON.parse?
Cites ewief · 2020-04 · Stack Overflow · on “How to initial window.__INITIAL_STATE__ to data in a .ejs view file?”
I would recommend you to change the approach and put JSON.stringify into <script id="__INITIAL_STATE__" type="application/json"> {JSON.stringify(data).replace(/</g,'\\u003c')} </script> and on the client side just do const state = JSON.parse(document.getElementById('__INITIAL_STATE__').textContent) according to chrome devs it is faster solution and you dont get any surprises related to quotes. Faster apps with JSON.parse (Chrome Dev Summit 2019): [this video]
Cites Mārtiņš Briedis · 2020-07 · Stack Overflow · on “Output JSON in JavaScript as string with PHP”
@ChrisG It's pretty interesting: [this video] I can (what I'm doing now), of course, just output raw JSON, but I've been fighting with this too hard - it's basically a matter of principle now... How hard could it be to escape two types of quotes?
Cites O. Jones · 2021-04 · Stack Overflow · on “Node: port some JSON processing logic to wasm, worth?”
tl;dr Don't use WASM for JSON manipulation. Setting up the WASM tooling is no small thing, and will likely require more ongoing troubleshooting and maintenance than lighter-weight solutions. Wasm generally comes into its own when you need to do truly compute-intensive stuff like customized signal (image/video/audio) processing for your browser users or natively inside server-size Javascript environments. If your purpose in doing this is avoiding overhead in JSON processing, you might consider looking for fast JSON packages on npm. fast-json-stable-stringify [LINK] is an example. You should also keep this in mind: V8 -- the open-source Javascript engine in nodejs, deno, and chromium -- is und
Cites yoonsukhyun · 2022-01 · Stack Overflow · on “Performance of declaring json - JSON.parse vs object literal”
MUST READ!! You said JSON.parse is faster, but this is the worst choice if your objects size are small. /* JSON.parse */ start = new Date(); for(i=0; i<1000000; i++){ //create 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++){ //create from JS Object Literal const miniObjectFromLiteral = { foo: 42, bar: 1337 }; } end = new Date() timeGap = end - start; //9 There is a performance difference of tens of times. Your thoughts can only be affected by the massive size of the object case, at least 8Mb. reference: [this video]