Estoy tratando de elegir una biblioteca para mi proyecto que ofrezca funciones de enlace de datos y gestión de DOM . Comparando múltiples bibliotecas terminé con Inferno y Svelte .
Noté que evaluar el tiempo de secuencia de comandos de Svelte es mayor que el de otras bibliotecas (consulte la imagen adjunta) .
En la muestra he renderizado una tabla de 100 x 15 (total de 1500 celdas). aunque el tiempo de renderizado se reduce en unos pocos milisegundos, pero el tiempo de ejecución del script de inferno es la mitad.
El tiempo aumenta drásticamente con el número de elementos, por ejemplo. para 15000 celdas, el tiempo de evaluación del script esbelto es de 2000 ms donde, como infierno, tomó 680 ms.
Código esbelto:
<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 muestra del infierno:
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 qué este tiempo de evaluación de script es alto para Svelte?
Respuestas:
La respuesta breve es que todavía no hemos hecho un trabajo particularmente bueno para optimizar listas grandes, mientras que Inferno (que se trata de micro optimizaciones y de aprovechar el profundo conocimiento de los autores sobre cómo funcionan los motores JS). ¡Mejorarlo está en la lista TODO!
fuente