Svelte的“评估脚本”时间比地狱法显得更为重要

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

我注意到 Svelte 的评估脚本时间比其他库(请参考附件图片)

Svelte的“评估脚本”时间比地狱法显得更为重要

高。

在示例中,我绘制了一个100 x 15的表格(总共1500个单元格)。尽管渲染时间减少了几毫秒,但是inferno的脚本执行时间是它的一半。

Svelte的“评估脚本”时间比地狱法显得更为重要

时间随着元素数量急剧增加,例如。 15000个单元格苗条脚本的评估时间为2000毫秒,而地狱则为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>

地狱示例代码:

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的脚本评估时间太长?

gengwenshuang 回答:Svelte的“评估脚本”时间比地狱法显得更为重要

简短的回答是,我们在优化大型列表方面还没有做得特别出色,而Inferno(这全是关于微观优化的过程,并利用了作者对JS引擎工作原理的深入了解) 。改进它在TODO列表中!

本文链接:https://www.f2er.com/3168038.html

大家都在问