If so, why would the stack be involved when talking element count?
If so, why would the stack be involved when talking element count?
This works, plain JS 150k rows
<style>
#viewport {
height: 600px;
overflow-y: scroll;
position: relative;
border: 1px solid #ccc;
width: 400px;
margin: auto;
}
.item {
position: absolute;
left: 0;
right: 0;
height: 30px;
padding: 5px;
box-sizing: border-box;
border-bottom: 1px solid #eee;
font-family: Arial, sans-serif;
}
</style>
<div id="viewport">
<div id="content"></div>
</div>
<script>
const viewport = document.getElementById('viewport');
const content = document.getElementById('content');
const itemHeight = 30;
const totalItems = 150000;
const items = Array.from({length: totalItems}, (_, i) => ({
id: i + 1,
name: `User #${i + 1}`
}));
content.style.height = `${totalItems * itemHeight}px`;
function render() {
const scrollTop = viewport.scrollTop;
const viewportHeight = viewport.clientHeight;
const start = Math.floor(scrollTop / itemHeight);
const end = Math.min(totalItems, start + Math.ceil(viewportHeight / itemHeight) + 10);
content.innerHTML = '';
for (let i = start; i < end; i++) {
const div = document.createElement('div');
div.className = 'item';
div.style.top = `${i * itemHeight}px`;
div.textContent = items[i].name;
content.appendChild(div);
}
}
viewport.addEventListener('scroll', render);
render();
</script>https://github.com/nuejs/nue/blob/master/packages/examples/s...
There is currently no demo about the crash, but you can setup this locally.
Here, I have recreated your JS example with searching and filtering and it does not crash. It's trivial to reuse a similar approach with the real backend and real events from the event source.
https://htmlpreview.github.io/?https://gist.githubuserconten...
*Update: Here is 1 million rows table with search, filtering and pagination. In plain Javascript:
https://htmlpreview.github.io/?https://gist.githubuserconten...
The fact you didn't even stop to wonder why the error was a stack overflow when you weren't using recursive functions is also telling.
What's next? "Oh I have a memory leak, let's get a subscription on RAM modules and just keep adding them!"