CODEWITHSUNDEEP
htmlperformancebrowserinnerhtml
Peter C
Peter C

Reputation: 6307

How is insertAdjacentHTML so much faster than innerHTML?

About a month ago, Firefox 8 implemented the insertAdjacentHTML method, which was added 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.

Upvotes: 7

Views: 4272

Answers (2)

Alohci
Alohci

Reputation: 83006

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.

Upvotes: 12

user123444555621
user123444555621

Reputation: 153174

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.

Upvotes: 1

Related Questions