/benchmark

A barebones benchmark comparing imba, React and maybe other frameworks

Primary LanguageJavaScript

Introduction

This is a benchmark to test Imba against React and Svelte. This is obviously not an extensive benchmark, but just to illustrate a point: Imba is very fast! ... 9 times faster than React and Svelte.

How comes? Well, Imba uses a different technique called the memoized DOM Check out how it works. It would be interesting to see other libraries and frameworks adopt it since it's so effecient.

The benchmark is a very simple automated test that playwright runs for each framework.

The test is very simple: it just clicks 500 times on a button that increments 10k other buttons

await Promise.all(Array.from(Array(count).keys()).map(()=> page.locator(`data-testid=${target}-1`).click())); // target is replaced with each framework
await expect(button1).toHaveText(`${count + 1}`)

No tricks here ^^' Inspect the code, run it locally and optimize if you feel like it. image

Results of running the benchmark can be seen here https://imba-benchmark.netlify.app/

Results are built on every push to main branch. And you can see the same results by inspecting github actions artifacts. Github actions machine is a bit more powerful than Netlify, so results are different but within the same range.

Profiling

In the following manual test, I clicked 20 times on buttons of each respective "framework".

If you know a way to automate this profiling, create an issue or a PR. I'd love to include that instead.

Look at the scripting portion or even better, try the profiling in your browser:

  • Imba: 147ms
  • Svelte: 487ms
  • React: 589ms

React results

image

Imba results

image

Svelte results

image