speed of innerHTML vs textContent
I was working on one of my js apps that updates the content of an element on mouseover. The performance in FF 2 was poor compared to all other browsers. After profiling with Firebug I realized that the problem was setting the innerHTML of an element. In Firebug, setting the innerHTML took about 3 times as long as the rest of the code for the mouseover, which included getting the mouse position, pulling a value from a large array, performing math on that number, and moving a cursor to the proper place on the screen.
I looked up the js docs, and found that FF elements have a property named textContent. I used this property instead of innerHTML, and performance for the mouseover doubled.
I was happy about finding this quirk. Then I told my friend Derik about it, he asked “did you look at the source to figure out why textContent is faster?”, then he called me a pussy when I told him I hadn’t.
The next post will be about delving into the Firefox source code