JavaScript Frameworks, Performance Comparison

by AJ Meyghani

Below is an excerpt from an article that I wrote on Medium. If you are interested you can read the full article on Medium.

I thought it would be fun to use Stefan Krause’s benchmark tool and do some performance comparison between the most well-known front-end frameworks and UI libraries.

Please note this post is simply the accounts of my observations from running benchmarks using the aforementioned tool on my laptop. You can use this post as a reference, but you MUST always run your OWN benchmarks and make decisions based on YOUR project requirements. You should also look at other benchmarks like real-world apps benchmarks.

Now, with that out of the way, grab a cup of coffee and enjoy the show.

Arena

All the benchmarks were executed on my MacBook Pro, with the following specs:

  • MacBook Pro (Retina, 15-inch, Mid 2015)
  • Processor: 2.2 GHz Intel Core i7
  • Memory: 16 GB 1600 MHz DDR3
  • Graphics: Intel Iris Pro 1536 MB
  • Browser: Google Chrome, Version 69.0.3497.100

Teams*

In our benchmark competition we have two teams, the frameworks and the libraries team. In the frameworks team (Team 1) we have:

In the UI libraries team (Team 2) we have:

The Battles

In this ultimate championship, each team is going to initially compete in their own teams. Next, to make things more interesting, the winners of each team are going to compete against each other. And finally, the top performers will compete against the all-time champion, PlainJS a.k.a VanillaJS.

Also, it’s worth mentioning that each team is going to compete in the following categories:

  1. DOM Manipulation
  2. Startup Time
  3. Memory Allocation

In order to have better results, each benchmark is carried out three times and the standard deviation for each result is recorded. Moreover, at the end of each teams’ battles, I will present a table summarizing the results for all the frameworks and libraries against the winner of the team.

At the end, for fun, I’ll also provide relative results for the most popular frameworks and libraries: Angular, Inferno, Preact, React, and Vue.

Team 1 Matches

The first round matches for Team 1 are listed below:

  • Angular vs Elm
  • AngularJS vs Choo
  • Marionette vs Mithril
  • Aurelia vs Ember

...

Read the rest of the article on Medium.