Svelte 'evaluate script' time is appearing higher compare to inferno, preact

Question

I am trying to choose a library for my project which provide data binding and DOM management features. Comparing multiple libraries I ended up with Inferno and Svelte.

I noticed evaluate script time of Svelte is higher than the other libraries (Please refer attached image) .

In the sample I have rendered a 100 x 15 table (total 1500 cell). though the rendering time reduces by few milliseconds but script execution time of inferno is half of it.

The time increases drastically with number of elements, Eg. for 15000 cell svelte script evaluation time is 2000ms where as inferno took 680ms.

Svelte Code:

<style>
table,td,tr {
  border: 1px solid black;
}
</style>
<script>
import { officedatabase } from '../../../data_generator/sampleGridData/initialloaddata.js';
</script>
<table>
  {#each officedatabase as row}
    <tr>
     {#each row as cell}
      <td>{cell}</td>
     {/each}
    </tr>
  {/each}
</table>

Inferno sample Code:

import { Component } from 'inferno';
import { officedatabase } from './initialloaddata.js';
export default class Grid extends Component {
  state = {
    data: officedatabase
  };
  render () {
    let data = this.state.data,
      rows = data.map((row)=> {
        return (
        <tr class='row'>
          {row.map((ele)=>{
            return <td style='border: 1px solid black;'>{ele}</td>;
          })}
          </tr>
        );
      });
    return (
      <div>
        <table style='border: 1px solid black;'>
          {rows}
        </table>
      </div>
    );
  }
}

Why this script evaluation time is high for Svelte?

Answer 1

The short answer is that we just haven't yet done a particularly good job of optimising large lists, whereas Inferno (which is all about micro-optimisations and taking advantage of the authors' deep knowledge of how JS engines work) has. Improving it is on the TODO list!