How to marry ReactJS and Sitecore with Webpack – Part 3. JS Engines Performance

If you are following ReactJS.NET topic, then you probably know that they are migrated to a new JS engine. Now the project is using JavaScript Engine Switcher, which supports multiple engines: MSIE, V8, Jint, Jurassic, Chakra Core & Vroom. As I’m planning to use JS engine to render components we need to know which one is the best.

Test Setup

For the test, I’m not going to use everything in ReactJS.NET but only JSPool and everything below.

I’m running it on my laptop with following configurations:

  • Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  • 16.GB RAM
  • Windows 10 Home 64-bit
  • 512 GB SSD

For each engine, I would 10 cycles initialization and procession of 1000 commands. As A command I’ve selected a server-side rendering of a header component used in previous posts. The component in generated as a part of a WebPack package that includes React & Redux. A size of the package is ~2mb.

Results

To start with I need to mention that not all engines were able to finish. Jurassic start throwing errors and was abandoned.

Here is a timing for each tested engine:

JS Engine Initialization, s Execution time for 1k, s Max Memory used, ~MB
Jint 4.57 53.52 450
MSIE Auto 1.55 6.62 280
ClearScript V8 2.66 6.94 190 *
ChakraCore 1.60 5.58 * 260
Vroom 1.46 * 7.55 360

And also scores:

JS Engine Initialization Execution time for 1k Max Memory used
Jint 3.12 9.59 2.37
MSIE Auto 1.06 1.19 1.47
ClearScript V8 1.82 1.24 1.00 *
ChakraCore 1.09 1.00 * 1.37
Vroom 1.00 * 1.35 1.89

In tables above you can see that engines except Jint are doing a good job. Vroom and ClearScript V8 both have Google V8 under the hood and execution time seems to be

Vroom and ClearScript V8 both have Google V8 under the hood and execution time seems to be similar as well. However, ClearScript does a better job in memory management.

MSIE and ChakraCore are pretty much the same engines as well but called differently. MSIE expects that you will have IE installed and goes through it, while Chakra Core is MS new JS engine itself. That is explaining overhead in an execution of scripts. (Did you know that CC is cross-platform and there is a CC version of NodeJS?)

Finally, based on all three params in the test, I declare CC a winner. Second place goes to ClearScript V8.

Summary

ClearScriptV8 and ChakraCore are 2 solid candidates to be used in Sitecore to integrate it with JS. Based on all three params in the test, I declare CC a winner 🙂

As a side effect of this test, I thought that for Sitecore we don’t need everything in ReactJS.NET module. I’ve overridden and replaced a lot over there already.  We could just create JSPool with CC Engine in Sitecore initialization pipeline and extend Sitecore controller with wrappers to render methods. That is what I’m planning to do next.


Follow me on twitter @true_shoorik. Would be glad to discuss ideas above in comments.

How to marry ReactJS and Sitecore with Webpack – Part 3. JS Engines Performance

3 thoughts on “How to marry ReactJS and Sitecore with Webpack – Part 3. JS Engines Performance

    1. Yep, I saw that but it makes no difference for my project 🙂 As Sitecore is windows only as of now, and will stay like that for a while.

      Btw, what is the bet way to debug and test embedded JS engine? It doesn’t seem to provide to much of debug info.

      Liked by 1 person

      1. Debugging support only the following modules: Msie (only works in the `ChakraIeJsRt` and `ChakraEdgeJsRt` modes), V8, Jurassic and Jint. All of these engines use a different debugging mechanisms. Debugging is enabled by using the `EnableDebugging` configuration property. Soon, I will describe it in the documentation.

        Liked by 2 people

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s