Performance test - Mikado vs MikadoProxy React vs Mithril

[anoxxxy]

Hi,

I recently conducted a performance test to compare the rendering speed of Mikado v0.7.64, older Mithril v1.0.0, and React v15.7.0. In the test, Mikado performed the fastest, followed by Mithril, while React was the slowest. The test involved inserting 20,000 "hi" <div> elements into the DOM.

I also performed a test between Mikado v0.7.64, newer React v18.2.0, and Mithril v2.2.3. In this test, Mikado was almost twice as fast as Mithril v2.2.3 and nearly three times as fast as React v18.2.0.

However, I want to mention that Mikado continued to be the fastest even when inserting more than 100,000 elements into the DOM.

As a newcomer to Mikado, I'm not sure if the coding I added for testing is fair. Nonetheless, I'm impressed with the performance of Mikado and hope it remains fast in future updates.

@ts-thomas, when making future updates to Mikado, please ensure that its performance doesn't degrade. Keep up the good work, and I'm looking forward to seeing the upcoming update.

For reference, here are the test results with the corresponding jsfiddle links for testing:

• Mikado v0.7.64, Mithril v1.0.0, React v15.7.0: https://jsfiddle.net/g9unjwrk
• Mikado v0.7.64, React v18.2.0, Mithril v2.2.3: https://jsfiddle.net/pcvuxqga

If there are any ways to further optimize the Mikado performance rendering in the code provided, please let me know.

function reactTest(n=20000) {
  var h = React.createElement

  console.time("React total")
  var list = new Array(n)
    for (var i = 0; i < n; i++) 
      list[i] = h("div", {key: i}, "hi")

  var vdom = h("div", null, list)
  ReactDOM.render(vdom, document.body)
  console.timeEnd("React total")


}
function mithrilTest(n=20000) {
  var h = m

  console.time("Mihtril total")
  var list = new Array(n)
  for (var i = 0; i < n; i++) 
    list[i] = h("div", {key: i}, "hi")

  var vdom = h("div", null, list)
  m.render(document.body, vdom)
  console.timeEnd("Mihtril total")


}
function mikadoTest(n=20000) {
  const tpl = (`<div>{{=data.content}}</div>`);
  const tplC = Mikado.compile(tpl);
  const view = Mikado(document.body, tplC);

  console.time("Mikado total")
  var list = new Array(n)
  for (var i = 0; i < n; i++) 
    list[i]= {content: 'hi'};

  view.render(list);
  console.timeEnd("Mikado total")
}
function mikadoProxyTest(n=20000) {
  
  
  var list = Mikado.array();
  const tpl = (`<div>{{=data.content}}</div>`);
  const tplC = Mikado.compile(tpl);
  const view = Mikado(document.body, tplC, {store: list});

  console.time("Mikado-Proxy total")
  
  for (var i = 0; i < n; i++) 
    list[i]= {content: 'hi'};

  console.timeEnd("Mikado-Proxy total")
}
n=20000;
reactTest(n);
mithrilTest(n);
mikadoTest(n);
mikadoProxyTest(n);

regards Anoxy

[ts-thomas]

Interesting test, tanks for providing, I will move this to discussion to keep this informations avilable. The implementation looks well done, nothing to improve. The next version will provide almost same performance, allthough I found a performance bug in the current version which could help the upcoming version to perform even better.

[ts-thomas]

I made a short benchmark test just for fun, rendering 2500 full sized templates:

Mikado-0.7.64: 182.645263671875 ms (edited: has now the same configuration)
Mikado-Beta: 159.152099609375 ms

It looks there is even more to get out :)

[anoxxxy]

Awesome, I was afraid the new version would have less performance.
This is pretty amazing @ts-thomas, thanks!

[ts-thomas]

@anoxxxy I've found a minor improvement you could add to your implementation:

const view = Mikado(document.body, tplC, { cache: true });

The cache is just useful for the non-proxy version.

[cayolblake]

@ts-thomas where could we access the Beta version from this test?

[ts-thomas]

It's now officially available in the master branch