I just learned about DocumentFragment, but I’m not entirely sure how to use it with what I have so far. I have around 9K-10K rows in my table and it takes about 4 seconds to load the entire table.
for (const user of totalsArray)
{
const truncatedUsername = truncateUsername(user);
const newRow = table.insertRow(table.rows.length);
const newCell0 = newRow.insertCell(USERNAME_IDX);
const newCell1 = newRow.insertCell(TOTAL_COMMENTS_IDX);
const newCell2 = newRow.insertCell(TOTAL_SCORE_IDX);
const newCell3 = newRow.insertCell(TOTAL_NEG_COMMENTS_IDX);
const userName = document.createTextNode(truncatedUsername);
const totalComments = document.createTextNode(user[TOTAL_COMMENTS_IDX]);
const totalScore = document.createTextNode(user[TOTAL_SCORE_IDX]);
const totalNegatives = document.createTextNode(user[TOTAL_NEG_COMMENTS_IDX]);
newCell0.appendChild(userName)
newCell1.appendChild(totalComments);
newCell2.appendChild(totalScore);
newCell3.appendChild(totalNegatives);
}
From what I understand, you make the new fragment with new DocumentFragment(), then you append to it instead of the DOM, then when you are done with the main loop, you append the fragment to the DOM. But I am not seeing a way to do that with the way I am currently inserting cells into the row, and then appending a new text node to each cell. How does DocumentFragment fit in here?
