Most efficient/fastest way to set content on a bunch of divs

Question

I'm currently updating the content of alot of divs using:

https://jsfiddle.net/foreyez/ctpuaw5v/

for (var i = 0; i < 400; i++)
{
   document.getElementById('box' + i).innerHTML = 'a'; // each element can have a different value, a is arbitrary
}

(400 is arbitrary, it could be alot more)

I'm wondering as far as browser reflow, would it do a reflow on each innerHTML set, and if so, maybe there's a way for me to update all divs at once with only one reflow (or even NO reflow) for performance reasons, or maybe use something faster than innerHTML.

Answer 1

If you can replace 400 calls of elem.innerHTML = ...; by single call of container.innerHTML = cummulativeHtml; it will be faster - only one DOM mutation transaction instead of 400.

Answer 2

如果您使用jquery，则可以执行以下操作：

$('.box').html('whatever');