All geek questions in one place

How is insertAdjacentHTML much faster than innerHTML?

About a month ago , Firefox 8 implemented the insertAdjacentHTML method, which was added in IE4 along with innerHTML. According to this test, insertAdjacentHTML is usually an order of magnitude faster than innerHTML.

I assume both calls to the same HTML parser, so why is the difference dramatic? insertAdjacentHTML is a simple method call, while innerHTML is a getter / setter, and there is probably a bit of overhead for this, but I would never have thought of that.

+6
source share
2 answers

work.innerHTML += "<span>test</span>"; equivalent to work.innerHTML = work.innerHTML + "<span>test</span>"; , that is, every time it starts, it must serialize all existing work contents, and then repeat the entire lot, plus an additional range.

work.insertAdjacentHTML("BeforeEnd", "<span>test</span>"); parses only one interval each time, and then attaches a small piece of the document to the DOM.

+10
source

The innerHTML installer must remove all existing child nodes before adding new ones.

I do not know if this is the only reason, but it is certainly a factor.

+1
source

Source: https://habr.com/ru/post/898239/

More articles:


All Articles