DOM Manipulation
Batch DOM changes to avoid repeated reflows. Build HTML strings or document fragments, then insert once.
jQuery
Intermediate
4 min read
Efficient DOM Manipulation
Example
// BAD: 100 DOM insertions = 100 reflows
const $ul = $("ul");
data.forEach(item => $ul.append(`<li>${item.name}</li>`));
// GOOD: one insertion
$ul.append(data.map(item => `<li>${item.name}</li>`).join(""));
// BETTER: DocumentFragment (zero jQuery overhead)
const frag = document.createDocumentFragment();
data.forEach(item => {
const li = document.createElement("li");
li.textContent = item.name;
frag.appendChild(li);
});
document.querySelector("ul").appendChild(frag); Pro Tip
A single innerHTML = "" + template literal is often faster than multiple .append() calls.