I have a web page that will receive 10k-row CSV data on which I have to call API to get more details after a successful ajax call I have to append all these 10k rows (5 columns - 4 input fields with jQuery validation rules). After successfully appending 10K rows and its validation rules web page becomes a bit slow like each button click will take 10 - 15 sec to reflect can I do anything to avoid this or reduce the time?
Things I have done:
- Replace all forEach, each loop with a basic for loop.
- Reduced validation overheads with hidden input fields.
- Used setTimeOut between 100 rows to avoid resource eating up by the browser(And tried to mimic infinity scroll by appending on 100 rows on 1-sec intervals).
let targetProducts = new Set();
let htmlToAppend = '', itemIndex = 0;
let itemCodesToValidate = new Map(), itemTotalLength = responseData.body.length;
let appendToTable = () => {
for (; itemIndex < itemTotalLength; itemIndex++) {
let item = responseData.body[itemIndex];
if (!(targetProducts.has(item['item_code']))) {
htmlToAppend += addTargetProductRow(
item['item_code'],
item['item_name'],
item['price'],
bulkUpdateValues[item['item_code']]?.a ?? '',
bulkUpdateValues[item['item_code']]?.b ?? '',
bulkUpdateValues[item['item_code']]?.c ?? '',
bulkUpdateValues[item['item_code']]?.d ?? ''
);
}
itemCodesToValidate.set(item['item_code'], 1);
itemCodes.set(item['item_code'], 1);
if (itemIndex + 1 < itemTotalLength && itemIndex % 100 == 0) {
setTimeout(appendToTable, 1000);
itemIndex++;
break;
}
}
if (htmlToAppend != '') {
$('#table_to_append tbody').append(htmlToAppend);
addTargetProductValidationRules(itemCodesToValidate);
htmlToAppend = '';
itemCodesToValidate.clear();
}
if ($('#table_to_append tbody tr').length) {
$('#bulk_update_button').prop('disabled', false);
}
};
appendToTable();
Nb: Can't do pagination(I know this is dumb but it's the requirement).