My current challenge involves retrieving 10,000 data entries from the server to store in an array. However, upon initial loading, I noticed a significant delay in rendering this data on the DOM. In an attempt to address this issue, I experimented with breaking down the task into smaller chunks and loading every hundred data entries into a new array.
Despite my efforts, the code implementation below did not yield the desired results. If anyone has insights or solutions regarding this problem in JavaScript, please share.
var count = 0;
var data = [{"Name":"test","id":1},..... up to 10000]
var newArray = [];
var i;
for(i = count; i < 10000; i++){
if(i > 100){
count = i;
}
document.getElementById('demo').innerhtml += data[i].Name;
document.getElementById('test').innerHtml += data[i].id;
}
<div id="demo"></div> <div id="test"></div>
Despite attempting to optimize this code for better performance during loading, I have yet to resolve the performance issues at hand.