Estou tentando escolher uma biblioteca para o meu projeto que forneça recursos de ligação de dados e gerenciamento de DOM . Comparando várias bibliotecas, acabei com o Inferno e o Svelte .
Eu notei que o tempo de script do Svelte é maior que as outras bibliotecas (consulte a imagem em anexo) .
Na amostra, renderizei uma tabela 100 x 15 (célula total de 1500). embora o tempo de renderização diminua em alguns milissegundos, mas o tempo de execução do script do inferno é metade dele.
O tempo aumenta drasticamente com o número de elementos, por exemplo. para 15000 células, o tempo de avaliação do script é de 2000ms, enquanto o inferno levou 680ms.
Código Svelte:
<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>
Código de exemplo do 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>
);
}
}
Por que esse tempo de avaliação de script é alto para o Svelte?
Respostas:
A resposta curta é que ainda não fizemos um trabalho particularmente bom para otimizar grandes listas, enquanto o Inferno (que trata de micro-otimizações e aproveita o profundo conhecimento dos autores sobre como os mecanismos JS funcionam). Melhorá-lo está na lista TODO!
fonte