Performance - use JSON.parse while sending the json to browser.

[pajaydev]

Description

From recent talks from v8 team, we know that JSON.parse approach is much faster compared to the JavaScript object literal. JSON.parse() is much faster than JavaScript evaluation. I got inspiration from the below article to make this change
https://v8.dev/blog/cost-of-javascript-2019#json

Why

This may be effective when you use handful of stateful components in your marko app and marko ships those to the browser. In the above case, browser takes time to parse and compile JS, I have made a small comparison with a sample JSON file in my machine. Below are the results

Before changes

After changes

Possible Implementation & Open Questions

We know that marko uses warp10 internally to serialize the data while sending it to browser. We can make this change as suggested below in this file https://github.com/marko-js/marko/blob/master/src/runtime/components/index.js#L188

      componentGlobalKey +
        "=(window." +
        componentGlobalKey +
        "||[]).concat(JSON.parse(" +
        JSON.stringify(safeJSON(warp10.stringify(renderedComponents))) +
        "))||" +
        componentGlobalKey

Kindly share any thoughts, concerns or feedback.

CC: @DylanPiercey @mlrawlings

Is this something you're interested in working on?

Yes

[tigt]

Related: marko-js/warp10#2

[tigt]

Slightly related: it should be safe to replace the Array#concat() call in your suggested code with Array#push(), right? 2 less characters, but more importantly it won’t return a newly-copied array.

[DylanPiercey]

@tigt after Marko initializes it actually replaces the global key with an object which has a concat method. Since the scripts generated also assign to the global, we also return the concat object from the concat method call.

See here: https://github.com/marko-js/marko/blob/master/src/runtime/components/init-components-browser.js#L275

[DylanPiercey]

Overall the impact of this in benchmarking seemed to be minimal and there are benefits to our JS based serialization approach (deduping, smaller runtime, more data types, etc).