Performance compared to other component libraries

[alex996]

How does Nano JSX compare to Solid, Svelte, Preact, etc.? I see that it results in a smaller bundle, but I wonder what the performance is like, particularly in the browser. Presumably it's on par with Solid? Perhaps it could be added to this benchmark? Thank you.

[yandeu]

I don't know if you can compare it since you can really optimize your code based on your needs. Just mix in Vanilla JS or even your own DOM Diffing algorithm if needed.

[alex996]

Interesting. It seems the app will run faster if you directly mutate the DOM (calling appendChild, set innerText, etc.), bringing it closer in perf to vanilla JS with no framework/runtime. But I think many people coming from React will lean towards Nano.render and this.update() to abstract those DOM calls away. The latter is what I'd be curious to see a benchmark of compared to Solid for example. But maybe they're apples and oranges, i.e. not really comparable.

[yandeu]

I just did the following test with a 6x CPU slowdown. The first example (using update) took 28.4ms; the second (a bit more optimized) took only 2.9ms. I don't think it make sence publishing results using update() nor not using update(). Nano-jsx should be flexible. Start using update(), if you need more performance tweak it manually.
You see that, nano-jsx is as easy to write as React but can be as performant as VanillaJS. This is because nano-jsx doesn't do much more under the hood than just rendering JSX.

import { h, render, Component } from '../node_modules/nano-jsx/esm/index.js'

const List1 = ({ items = 1 }) => {
  return (
    <ul>
      {[...Array(items)].map((x, i) => (
        <li>hello</li>
      ))}
    </ul>
  )
}

class App1 extends Component {
  items = 0

  didUpdate() {
    if (this.items < 1000) {
      this.items += 1
      this.update()
    }
  }

  didMount() {
    this.update()
  }

  render(_update?: any): void | HTMLElement {
    return <List1 items={this.items} />
  }
}

let start = performance.now()
render(App1, document.body)
let timeTaken = performance.now() - start
console.log('Total time taken : ' + timeTaken + ' milliseconds')

// ---
document.body.innerHTML = ''
// ---

class List2 extends Component {
  render() {
    return <li>asdf</li>
  }
}

class App2 extends Component {
  list?: HTMLUListElement

  didMount() {
    for (let i = 0; i < 1000; i++) {
      this.list?.append(render(<List2 />))
    }
  }

  render() {
    return <ul ref={(el: HTMLUListElement) => (this.list = el)}></ul>
  }
}

start = performance.now()
render(App2, document.body)
timeTaken = performance.now() - start
console.log('Total time taken : ' + timeTaken + ' milliseconds')

[mefcorvi]

It's always possible to use manual DOM manipulations to optimize something and meet the requirements of the benchmark, but the key point is to use an idiomatic approach for each framework. For example, what is the idiomatic way to create a table in which rows are highlighted when clicked in nano-jsx?