DOM Enlightenment (Free Ebook)

Learning Resources and Study Groups
1

I’ve been reading this at the meetup and it’s interesting.

http://domenlightenment.com/

2

There is some interesting info in the book.

innerHTML invokes a heavy & expensive HTML parser where as text node generation is trivial thus use the innerHTML & friends sparingly

On the computer that I used for testing, the innerHTML way of appending managed to append only slightly over 200 tweets in five full seconds. In contrast, the insertAdjacentHTML("beforeend", ...) way of appending managed to append almost 30,000 tweets in 5 seconds. (Yes, that’s hundreds versus tens of thousands.) Obviously, real Web apps should never block the event loop for five seconds—this is just for benchmark purposes. However, this illustrates how the innerHTML way of appending becomes notably slower as more and more content accumulates to be serialized and reparsed each time.

More info:

insertAdjacentHTML() parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation.

And:

textContent gets the content of all elements, including <script> and <style> elements, innerText does not

innerText is aware of style and will not return the text of hidden elements, whereas textContent will