I'm thinking of layout about a hundred thousand text spans which react to a callback function like the link below.
https://codepen.io/jotnajoa/pen/RwGmOzG
for(let i=0; i<100000;i++){
spans.push(i)
};
spans.forEach((d,i)=>{
$('.container').append(`<span class='spans ${i}'>${Math.floor(Math.random()*100)}</span>`)
})
What I try to achieve eventually is
among the text element I laid out, highlight specific text which falls into a category I set
like 'highlight' texts which meets a certain criteria once I click the button at the bottom.
I tried out briefly by making thousands of 'span's.
I also think of canvas using p5js or just text element in svg using d3 or just using vanialla JavaScript/jQuery in the example I posted above.
However, I'm bit worried of crashing my computer down once the number of element I create reaches to a very big number.
Performance-wise,
what would be the most efficient way of making element which could react to a call back function
later on?
I guess canvas but if I use canvas, I need to create hundreds thousands of object created by class which sounds quite intimidating.
For now, only option I could think of is <span>
.
Any suggestion?
question from:
https://stackoverflow.com/questions/65866688/what-would-be-the-least-burden-for-laying-out-100000-text-spans-as-individual-el 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…