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.