Why removeChild faster than innerHTML = ' '?

Question

I have a two functions from this answer to another question:

1.

const destroy = container => {
  document.getElementById(container).innerHTML = '';
};

const destroyFast = container => {
  const el = document.getElementById(container);
  while (el.firstChild) el.removeChild(el.firstChild);
};

Why second func is faster than first func?

Do you have some kind of experimental results that suggest the second one faster? — Sнаđошƒаӽ, Jun 29 '20 at 03:45
@Sнаđошƒаӽ no, i just looked at the answer and asked — Windows Eight, Jun 29 '20 at 03:48

score 4 · Answer 1 · answered Jun 29 '20 at 03:40

4

As a rule of thumb, innerHtml is slow because the browser needs to reparse the html (even though it is being set to ''). removeChild, however, directly modifies the DOM without any parsing needed. Therefore removeChild is faster.

answered Jun 29 '20 at 03:40

Luke

565
5
19

Why removeChild faster than innerHTML = ' '?

1 Answers1