Ich versuche, eine Bibliothek für mein Projekt auszuwählen, die Datenbindungs- und DOM-Verwaltungsfunktionen bietet . Beim Vergleich mehrerer Bibliotheken kam ich zu Inferno und Svelte .
Ich habe festgestellt, dass die Auswertungszeit für Svelte höher ist als für die anderen Bibliotheken (siehe beigefügtes Bild) .
Im Beispiel habe ich eine 100 x 15-Tabelle (insgesamt 1500 Zellen) gerendert. Die Renderzeit reduziert sich zwar um einige Millisekunden, aber die Skriptausführungszeit von Inferno ist die Hälfte davon.
Die Zeit nimmt drastisch mit der Anzahl der Elemente zu, z. Für 15000 Zellen beträgt die Auswertungszeit für schlanke Skripte 2000 ms, während das Inferno 680 ms dauerte.
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-Beispielcode:
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>
);
}
}
Warum ist diese Skriptauswertungszeit für Svelte hoch?