- JS object appears to be at least 2x faster than document.createElement() (Chrome)
- Note: JS object only loosely represents JSX element so it is a bit unfair. But with actual JSX objects I would assume it is still somewhat faster than the DOM API.
Your current benchmark does not represent browsers in 2013.
It also presents a wildly different use case. It’s common to rapidly create and destroy nodes only because that is what convenient for framework logic. Outside of frameworks DOM nodes are modified more frequently than created anew.
> - Pete Hunt, one of the React devs, says "JSX is faster than the DOM because it is JS memory."
That doesn’t make sense. Your only choices to display content in the browser using JS is via DOM modification or canvas. If not using canvas you are touching the DOM no matter what. It is true that DOM memory is different than JS memory, but the DOM API is fast enough that it doesn’t matter, especially since you are touching the DOM no matter what. If your approach to DOM interaction is too slow it’s because of string parsing on things like innerHTML and querySelectors. So if performance is important then don’t do things that parse strings and don’t abstract away the DOM interaction because you are touching it no matter what.
https://jsben.ch/cSWJa
- JS object appears to be at least 2x faster than document.createElement() (Chrome)
- Note: JS object only loosely represents JSX element so it is a bit unfair. But with actual JSX objects I would assume it is still somewhat faster than the DOM API.
https://youtu.be/DgVS-zXgMTk&t=1532
- Pete Hunt, one of the React devs, says "JSX is faster than the DOM because it is JS memory."