Faster apps with JSON.parse (Chrome Dev Summit 2019) 

Incidentally explains what are context free grammars and why they are faster to parse :-) Don't understand why it's down-voted: 100% knowledge & technical.

is this why you guys steal all of my RAM

This is great for a computer theory class. JSON is a context-free grammar while JS objects are not and that pretty much explains the optimization as well

Interesting. Totally makes sense... I remember reading this awhile ago but didn’t understand why.

That was a good chunk of info for a 6-minute video. Well done!

Thanks for that short but extremely helpful tip!!

The speedup seems to be insignificant in spidermonkey, is this because the JSON parser in spidermonkey is slower or because the JS literals are faster?

If your web app requires 8MB of json for *initial* load of the page then you're doing something wrong.

Every day, Javascript finds another way to make me sick.

Serializing an object into a string and parsing it back into an object is faster than just passing the object. Gotta love js.

oh wow. Woulda never have guessed that

I'm actually somewhat accidentally using this in a Pokemon Damage Calculator. I have a 33.8 KB json file with all the pokemon data needed. I could probably include the type matchup lookup in that as well.

Subscribing to these channel and watching just 4 of its videos has made that time so much more productive.

Surprising, but makes a lot of sense when you considered how a parser works.

Ah, reminds me of context free grammar :D

Good tip and explanation makes sense. Thanks

And after a crazy years of many JS frameworks we are going back again, to a recommendation from Google, to use Server Side Rendering :D :D

This one weird trick will...

Giving numbers with details maybe helpful instead of just saying 1.5x and 2x. (Smaller time intervals like 0.001ms and 0.005ms isn't much of a difference but the times values will be larger)

I like how they always use 42 (The Hitchhiker's Guide to the Galaxy) and 1337 (Elite) in examples :D

It'd be nice to see code compression tools utilize this.

Good tip. Correct me if I'm seeing, but most of the time you will be fetching data from an API as a string (not sure about GraphQL) and parsing the returned string, so everyone is already using this tip I think. 🤔 Also aside from that I can't imagine people stringifying, passing the string as a parameter and then parsing out the objects functions or props is faster than just passing the object. Thanks for the tip though 🤓👍

Wonder, if angular 2+ is already buried if google itself talks about react and redux.. maybe i have to rethink my decision to work with angular 8 on my new project.

I tried to benchmark your examples in chrome console. It always shows that JS way is faster than JSON's one. What is wrong in my benchmark approach? JSON code console.time('test JSON'); var data_JSON = JSON.parse('{"foo":42,"bar":1337}'); // 🚀 console.timeEnd('test JSON'); JS code console.time('test JS'); var data_JS = { foo: 42, bar: 1337 }; // 🐌 console.timeEnd('test JS'); These 2 code pieces were always ran separately

That was very insightful, thank you!

foo: 42 bar: 1337 I see what you did there~

Does/will typescript compiler automatically convert bigger objects to JSON.parse call?

Thanks for the tip. Really helpful 👍

Wow. I would never have guessed that! :-)

I wonder which app needs 8MB of json data in a js file.

I believe Chrome caches a parsed version of a JS file. I guess this means that the object literal version will only need to be parsed once, not on subsequent pages that also use the - cached - JS file. Since JSON.parse() is a runtime function call I guess it will have to be executed on every page where the JS file is used. Is this correct? If so I assume JSON.parse() is faster on the first page, but slower in a whole session (on a multi page site).

Can someone please explain this to me:- isnt all the data we receive from RESTFUL API in a string ? so when we do JSON.parse() we are following best practices ?

Thanks, my object literals waere like 130kb. Now I know that there are better ways to handle that.

When will google earth be available on a trustworthy browser?

would have been better if you showed a typical use-case you could have refactored from objects to json strings

Thanks a lot, it was very informative 😇

I stock to server side rendering

Thank you for Promise.any() Mathias.

Does this apply to the parsing of JSON payloads from REST endpoints? Would it be better to return a .js file that is executed at the client with a JSON.parse rather than returning a JSON payload that is consumed by the UI? Or is that communication not affected by this parsing issue?

Foo: 69, Bar: 420, Fubar: 1337

It's good , but correct me if I'm seeing, but most of the time you will be fetching data from an API as a string (not sure about GraphQL) and parsing the returned string, so everyone is already using this tip I think. Also aside from that I can't imagine people stringifying, passing the string as a parameter and then parsing out the objects functions or props is faster than just passing the object. Thanks for the tip though

Thank a lot for the information. I'm still not going to use this :)

Does this means the extra bundle size (leading to slowness of first rendering) because of shipping JSON instead of JS Objects ?

Eye opening!!

SO WHY THEN doesn't V8 do this behind the scenes?

why would a web page need 10kb of javascript object on initial load? i mean you know its ok to dynamically load stuff, right? the initial website should be INSTANTLY there and once it shows, you should go and fetch stuff in the background. the 800 ms until the user clicks something is cheaper than 800ms before the user sees anything. Just have proper placeholders/openable stuff to hide the loading and maybe a spinner.

I hated Grammars as a subject in my Engineering. Context-Sensitive grammar was beyond my puny head

Does Create React App have this optimization applied already?

But you guys probably parse lots of ads. Instead of doing micro optimization why not ban ads that will probably make browser faster by 80%

I always test this kind of thing, and I'm not getting any positive results at all. On smaller objects it's 20 times slower to parse, at objects over 10KB it's still 6 times slower to parse. Testing just an object with any kind of data in it vs the same object in string form. I built a jsfiddle (code sandbox) to test it. Code: /wLq063h1/3/ Just plop that at the end of the jsfiddle url to get the code and test it for yourself. Running one object 50,000 times: 1700ms for parse, 250ms for literal on a 13KB object. Have I missed something major or is this only useful when your object is several MB large (in which case what the heck are you doing loading MB of data on startup?)

NEAT 🌟! the parsing explanation is very clear thanks, bookmarked🔖 this to integrate into workflow and coding👨‍💻

Okay, but what about pre defining the variable as an object then

I actually use a 100MB json file in a project atm (lots of 7kb base 64 images put the size up)... only takes 1.5 seconds to load which honestly is so much quicker than I thought it would. I guess maybe that's thanks to the way JSON.parse works.

content!!!!!

nice tips

So should we store our redux state as string and parse it everytime when we read it?

does it mean for deep clone json.parse(jaon.stringify({})) is faster than doing it by any library

Is this true in Firefox as well?

Cool trick

"Server side rendering" This is PHP

6:21 Referenced V8 Blog - The cost of JavaScript in 2019 v8.dev/blog/cost-of-javascript-2019

What are the long term effects for Mobile Video

Feels bad. Web should allowed to run AOT-compiled code.

JSON.parse("oh i see")

Wow ! Tnx !

Is this in Closure Compiler?

The optimized parsing should also happen for XHR, right?

Awesome

Why not add a Literal({}) primitive in Javascript that serves as a marker to the parser that "what's inside is a JSON-like literal"?

Looks like something Terser could do!

What’s the codes’ font name? It looks cooler than my usually used Consolas?

Wow

Because

Assuming for legal reasons foo is 42 and not 420 lmao

Wouldn't parsing text instead of instanciating an object always be faster in any programming language?

From google I would have expected a recommendation for Angular.. ?

well, will this trick work with a valid JSON object literal where the keys are already denoted in strings?

Something wrong with JS serialized object init

parse

The reality is that it is extremely rare for web developers to work with payloads of 8MB on client-side. For a small payload, Json.parse is less efficient, less clean and less easy to maintain. Cool trick, but unusable in practice.

I noticed you're a parser for more than a minute

Hey Mathias , where is my ram? Just to you know i don't have any more slots to upgrade, so can you be so kind and stop stealing my ram I will go broke if i buy a new pc :(

I wonder when people will finally stop pretending that Server Side Rendering is somehow faster than a well structured client side app. People have to download all of that HTML and then the browser has to parse it all the same as the JS. There is no speed benefit there, unless your SPA sucked to begin with.

I would hope that you don't write that 8 MB Javascript object by hand. And if you generate it on server side, wrapping it into JSON.parse (or just adding the JSON.parse on the client side) should be easy to do.

hmm, i wonder how angular cli does it?

Or you can just drop JS and replace it with non-tickey language that is faster to parse, this is the ultimate dream.

Can you do a hack for me it's a game called hasharia drifter its got a json file which we can't mod neon texture onto the car paint can you please help me bro game guardian used to work the developer did something

example number 521 why developers and end users despise javascript in any form.

Awesome trick. 💥 Sometimes we may encounter circular reference error occurs when you have a property of the object which is the object itself directly (a -> a) or indirectly (a -> b -> a).

Once I JSON.parse() my object, what the hell am I supposed to do with that string??

The only thing I don't get is the reason someone would store large amounts of data in object literals...

Cool.But how to do it on a large objects with multiple lines with mixed datatypes? -.-

Browser speedrunning

Woah

Hi gang!

Did you just call react and redux "frameworks"?

FRAMEWORKS - REACT - REDUX...

Problems with this method start to show up when your string literal contains some unexpected symbols for some server-json-encode-html-http-json-parse pipe transformations, and you will find yourself making something like JSON.parse('{...}'.replace(' ','\ ')) all over you raw data in your page

hi gang

hear I having the feeling... whhhaaaat🙄