How many repaints of the DOM will appending children in a for loop cause?
I was under the impression this would cause 200. 1 for each time an element is appended, and 1 every time its textContent is updated.
But, in Jake Archibald's talk at JSConf, he seems to mention that browsers will batch this together.
for (let i = 0; i < 100; i++){
const div = document.createElement('div');
document.body.appendChild(div);
div.textContent = 'Hello';
}
Only once; see Erin Zimmer's continuation on the rendering pipeline https://youtu.be/u1kqx6AenYw
Also, you may test it with something like:
//document.body.innerHTML = '';
for (let i = 0; i < 100; i++){
const div = document.createElement('div');
document.body.appendChild(div);
div.textContent = 'Hello';
let x = 0;
for(let j = 0; j < 1e7; j++){
x += Math.sin(Math.random())
}
}```