How is insertAdjacentHTML so much faster than innerHTML?

About a month ago, Firefox 8 implemented the insertAdjacentHTML method, which was ad开发者_运维百科ded to IE4 along with innerHTML. According to this benchmark, insertAdjacentHTML is usually an order of magnitude faster than innerHTML.

I assume both call the same HTML parser, so why is the difference that dramatic? insertAdjacentHTML is a simple method call, whereas innerHTML is a getter/setter and there's probably a bit of overhead for that, but I would never imagine that much.

---

work.innerHTML += "<span>test</span>"; is equivalent to work.innerHTML = work.innerHTML + "<span>test</span>";, i.e. each time it runs it has to serialise all the existing contents of work and then reparse the whole lot, plus the additional span.

work.insertAdjacentHTML("BeforeEnd", "<span>test</span>"); is only parsing the one span each time and then attaching the small document fragment to the DOM.

---

The innerHTML setter will have to remove all existing child nodes prior to adding new ones.

Don't know if this is the only reason, but that's certainly a factor.