I am adding many tens of thousands of elements to the DOM using Svelte but it takes a long time to get to first paint.
This is a toy example:
<script>
const data = Array(100000).fill(0) // 100 000 datapoints
</script>
{#each data as _, i}
<div>{i}</div>
{/each}
How can I optimise the code?
While the number of elements in the above example are roughly the same amount that I have in my application my elements are more complex, composed of multiple children, uses grid layout, some of the children are absolut positioned inside their parents, etc, etc.
All the elements need to be renderer at the get go or as soon as possible as there is scroll to end functionality that the user can trigger and the user should be able to see the amount of "stuff" that scrolls by.