View Update Methods Compared

Click a methodology to test the performance in FPS.

• vanilla DOM :: Is a naive implementation
• vanilla innerHTML :: Is a naive implementation using innerHTML instead of the DOM
• intraHTML :: Is a naive implementation using intraHTML instead of innerHTML
• intraHTML.update :: Is an optimized implementation using intraHTML.update()
• react :: Uses react to update the DOM
• react optimized :: Uses an optimized setup with react to update the DOM (w/shouldComponentUpdate)
• vanilla optimized :: Uses innerHTML to build and the DOM to update each pixel each time
• vanilla beta :: Uses innerHTML to build and the DOM to update (w/ a state cache to mimic shouldComponentUpdate() )

Takeaway:: React is fast, custom coding is fastest, intraHTML is a lot faster than innerHTML with little extra effort.