What performance issue might arise from the following code pattern?
function createElements(count) {
const container = document.getElementById('container');
for (let i = 0; i < count; i++) {
const element = document.createElement('div');
element.textContent = `Item ${i}`;
container.appendChild(element);
}
}
This code pattern causes multiple forced reflows and repaints, which significantly impacts performance. Every time appendChild() is called, the browser may need to recalculate the layout (reflow) and repaint the screen. When this happens repeatedly in a loop, it causes a significant performance bottleneck. A more optimized approach would use DocumentFragment or batch DOM updates: create all elements first, append them to a document fragment, and then append the fragment to the container in a single operation. Example: const fragment = document.createDocumentFragment(); /* create and append elements to fragment */ container.appendChild(fragment);. This reduces the layout thrashing by limiting DOM updates to a single operation.