[emadda]

One of the reasons for JSX originally was to reduce usage of the DOM APIs, as they are slower than direct JS object manipulation. The JSX diff of prev/next allows you to minimize DOM API calls.

I would guess there is more overhead in creating a dom element than a JS object (which JSX elements compile to).

[austin-cheney]

React came out in 2013. At that time object manipulation would likely have been, at best, only marginally faster than writing to the DOM.

First, you have to understand that at that time Firefox was about 500x faster at accessing the DOM than Chrome and about 250,000x faster accessing the DOM via the API methods than via querySelectors. Firefox and Chrome performed about equally in use of querySelectors with Chrome being a tiny bit faster. So, the DOM was already fast, but occupied a different memory space than JS.

At any rate the original motivation had nothing to do with performance. The goal was to introduce a template system that fit with React’s state/component system. JS modules weren’t a thing yet, so code organization was very different at that time and centered around concepts like AMD and Common.js, though it was mostly some form of AMD typically require.js.

The design of the template system in Vue was created to solve for the exact same conditions according to the internal organization of Vue.

[emadda]

Respectfully, my experience says otherwise:

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."

[austin-cheney]

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.