<commit_before>title: Performance Comparisons
---

# {{title}}

## TodoMVC Benchmark

This is a benchmark found in the [webkit performance tests](https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench) based on the [TodoMVC](http://todomvc.com/) project. For each framework implementation, add 100 todos, toggle them one by one, then delete them one by one. In addition to the most popular MV* libraries, I also included [Om](https://github.com/swannodette/om) (a ClojureScript interface on top of React which boasts of performance) and [Ractive](http://www.ractivejs.org/) (very similar in terms of use case and API).

### Compared libraries

- Vue (v0.7.3)
- Backbone (v1.1.0) + jQuery (v2.0.3)
- Knockout (v3.0.0)
- Ember (v1.0.0) + Handlebars (v1.0.0) + jQuery (v1.9.1)
- Angular (v1.2.7)
- React (v0.8.0)
- Om (version unknown) + React (v0.8.0)
- Ractive (v0.3.8)

### Results

10 runs average, faster is better. Data collected on an <span id="_machine"></span> with a <span id="_cpu"></span> Processor under <span id="_os"></span>.

<ul id="benchmark-results"></ul>

Please note these numbers only reflect one very specific use case and the outcome could be drastically different depending on implementation and interactions measured. However, this could at least provide some perspective in terms of general performance.

You can run these benchmarks in your browser [here](/perf/todomvc-benchmark/).

<script src="/js/benchmark.js"></script>
<link rel="stylesheet" type="text/css" href="/css/benchmark.css">

## Animating 100 Instances

You might have seen [this performance comparison](http://jsfiddle.net/jashkenas/CGSd5/) made by <NAME> long time ago between Backbone.js and Ember.js. Here is a [new version](http://jsfiddle.net/yyx990803/h7rjy/4/) which compares latest Backbone.js and Vue.js instead with an FPS meter. On my machine in Chrome, Backbone runs at ~30fps while Vue at ~50fps.

In addition, here's [another version](http://jsfiddle.net/yyx990803/h7rjy/5/) of the same comparison, but using a single, centralized Model for all the Views/ViewModels. The performance difference is more obvious with Backbone at ~40fps and Vue reaching ~80fps (due to `_.defer` firing faster than `requestAnimationFrame`).<commit_msg>update animation perf example<commit_after>title: Performance Comparisons
---

# {{title}}

## TodoMVC Benchmark

This is a benchmark found in the [webkit performance tests](https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench) based on the [TodoMVC](http://todomvc.com/) project. For each framework implementation, add 100 todos, toggle them one by one, then delete them one by one. In addition to the most popular MV* libraries, I also included [Om](https://github.com/swannodette/om) (a ClojureScript interface on top of React which boasts of performance) and [Ractive](http://www.ractivejs.org/) (very similar in terms of use case and API).

### Compared libraries

- Vue (v0.7.3)
- Backbone (v1.1.0) + jQuery (v2.0.3)
- Knockout (v3.0.0)
- Ember (v1.0.0) + Handlebars (v1.0.0) + jQuery (v1.9.1)
- Angular (v1.2.7)
- React (v0.8.0)
- Om (version unknown) + React (v0.8.0)
- Ractive (v0.3.8)

### Results

10 runs average, faster is better. Data collected on an <span id="_machine"></span> with a <span id="_cpu"></span> Processor under <span id="_os"></span>.

<ul id="benchmark-results"></ul>

Please note these numbers only reflect one very specific use case and the outcome could be drastically different depending on implementation and interactions measured. However, this could at least provide some perspective in terms of general performance.

You can run these benchmarks in your browser [here](/perf/todomvc-benchmark/).

<script src="/js/benchmark.js"></script>
<link rel="stylesheet" type="text/css" href="/css/benchmark.css">

## Animating 100 Instances

You might have seen [this performance comparison](http://jsfiddle.net/jashkenas/CGSd5/) made by <NAME> long time ago between Backbone.js and Ember.js. Here is a new version which compares the same implementation with latest Backbone.js, Ember + HTMLBars, React.js and Vue.js:

<iframe width="100%" height="500" src="http://jsfiddle.net/yyx990803/uv4Jn/embedded/result,js,html,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
{'fraction_non_alphanumeric': 0.12479627473806752, 'fraction_numerical': 0.02840512223515716, 'mean_word_length': 4.63040629095675, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2056998', 'n_tokens_mistral': 1398, 'n_tokens_neox': 1316, 'n_words': 485}