Is it possible to “buffer” DOM changes that happen in a loop (to increase performance)?

Question

To make it clear what I\'m asking, here is my example (fiddle).

I have a list of ~500 random names. I have an input at the top that has live-style searching. On ever

Answer 1

As long as you do not query properties that trigger an immediate reflow the browser already batches the updates for you and only relayouts/repaints the page once your javascript is done. You should be able to verify this in the browser devtools.

But there is a trivial optimization for your code: avoid redundant DOM manipulations, especially for elements that are not visible anyway.

The else branch that gets applied for hidden items:

else {
  hideItem(item);
  toPlainText(item);
}

the toPlainText manipulates the DOM even the element will be hidden or already is hidden.