与 inferno 相比，Svelte 'evaluate script' 时间似乎更长，preact

Question

我正在尝试为我的项目选择一个提供数据绑定和DOM管理功能的库。比较多个库，我最终得到了 Inferno 和 Svelte。

我注意到 Svelte 的评估脚本时间比其他库要长 （请参考附图） 。

在示例中，我渲染了一个 100 x 15 table（总共 1500 个单元格）。虽然渲染时间减少了几毫秒，但 inferno 的脚本执行时间是它的一半。

时间随着元素数量的增加而急剧增加，例如。对于 15000 个单元格的 svelte 脚本评估时间是 2000 毫秒，而 inferno 需要 680 毫秒。

精巧代码：

<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示例代码：

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>
    );
  }
}

为什么这个脚本对 Svelte 的评估时间很长？

Answer 1

简短的回答是我们还没有在优化大型列表方面做得特别好，而 Inferno（它是关于微优化和利用作者对 JS 引擎如何工作的深入了解的））已。改进它在 TODO 列表中！

与 inferno 相比，Svelte 'evaluate script' 时间似乎更长，preact

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

javascript

performance

infernojs

svelte

svelte-3