This is a simple rendering speed test between the most popular libraries/frameworks. 
<h3>Updates:</h3>
9/18/2015 - updated mag.js version, removed array observe polyfill
27.05.2015 - Second update today: Changed Angular.js to only $apply ONCE per 100 writes: That's a more realistic comparison to the newer frameworks that do that implicitly. Angular is still disappointingly slow, but what can you do.
27.05.2015 - Fixed 622 on IE. Now Mag.js is super-fast on IE as well, though it performs rather pitifully on mobile. Also, note on React: It looks like the "proper" way to use React is to queue up a bunch of changes and then create them all at once. See this benchmark for an example: https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout
26.05.2015 - Added Mag.js back to 619 because it's SO fast, even when I force a render in every test, and because it's one of the few that doesn't rely on mixing code into your HTML; 620/621 both fail for me, and 619 was the last version that worked.
17.05.2015 - Updated angular, ember, react and mithril to their latest versions. e.g. ember now uses the new Glimmer engine. However react still is way too slow. I'm not a react expert, please look at react and fix the test if you are experienced with reactjs Also we might want to include ractive and Mercury again, the latest working version seems to be commit 603. However after that it stopped working, therefore it is not included anymore. Feel free to make it work again!

Preparation Code

Preparation HTML
(this will be inserted in the <body> of a valid HTML5 document in standards mode)
(useful when testing DOM operations or including libraries)

<!-- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.0-beta.1/ember-template-compiler.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.0-beta.1/ember.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
<!--[if IE]><script src="https://rawgit.com/jakearchibald/es6-promise/master/dist/es6-promise.min.js"></script><![endif]-->
<script src="https://rawgit.com/magnumjs/mag.js/master/dist/mag.0.16.min.js"></script>
<script src="https://cdn.rawgit.com/MaxArt2501/object-observe/master/dist/object-observe.min.js"></script>

      <script src="http://polygit.org/polymer+v1.1.0/components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="http://polygit.org/polymer+v1.1.0/components/polymer/polymer.html">
<!-- Polymer -->
<template id="polynode" is="dom-repeat">
  <span>[[item]]</span>
</template>


<!-- Jquery -->
jQuery:
<div id="jq_test"></div>

<script>
var jqEl = $('#jq_test');
var children = [];
var jqPush = function (data) {
 children.push('<span>' + data + '</span>');
}
var jqClear = function () {
 children = []; 
 jqEl.empty();
}
var jqAdd = function() {
 jqEl.append(children.join(""));
}
</script>

<!-- Angular -->
<div ng-app="app">
  Angular:
<!--  <span ng-controller="Ctrl" id="angList"><span ng-repeat="item in data track by $index">{{item}}</span></span> -->

<span ng-controller="Ctrl" id="angList"><span ng-repeat="item in data track by $index">{{::item}}</span></span>
</div>

<!-- Knockout -->
<div id="koapp">
  Knockout:
  <span data-bind="foreach: data"><span data-bind="text: $data"></span></span>
</div>

<!-- Ember -->

<div id="emapp"></div>
<script type="text/x-handlebars">
  Ember:
  <span>
    {{#each EMapp.data}}<span>{{this}}</span>{{/each}}
  </span>
</script>


<!-- React -->
<div id="react">
  React: <span id="reactMountNode"></span>
</div>


<!-- Mithril -->
<div id="mithrilapp">
  Mithril: <span id="mithrilMountNode"></span>
</div>


<!-- Vuejs -->
<div id="vuejs">
        Vuejs: <span id="vuejsMountNode"><span v-repeat="item: data">{{ item }}</span></span>
</div>

  <!-- MagJS -->
  <div id="magjsapp">
    MagJS: <div>
            <span id="magjsappMountNode"><span class="magjsdata"><span></span></span></span></div>
  </div>

<script>
window.getId = function(idx)
  {
    var d = Date.now() + "";
    return idx + "-" + d.substring(d.length - 6);
  };

angular.module('app', [])
.controller('Ctrl', ['$scope', Ctrl]);
function Ctrl($scope) {
    $scope.data = [];
};

var KOData = ko.observableArray();
var KOviewmodel = {data: KOData};

var ENV = {EXTEND_PROTOTYPES: false};

var ReactComponent = React.createClass({displayName: 'PerfTest',
  getInitialState: function() {
    return { data: [] };
  },
  render: function() {
    return (
       React.createElement("span", null,
        this.state.data.map(function(result) {
          return React.createElement("span", null, result);
        })
      )
    );
  }
});

var MithrilData = new Array();
var mithapp = {
  controller: function() {
    this.data = MithrilData;
  },
  view: function(ctrl) {
    return m("span", [ctrl.data.map(function(datum) { return m('span', datum); })]);
  }
}

$(document).ready(function() {



  EMapp = Ember.Application.create({
    rootElement: '#emapp'
  });
  EMapp.data = Ember.A();

  window.EMclear = function () {
    EMapp.data.clear();
  };
  window.EMpush = function (data) {
    EMapp.data.pushObject(data);
  };


  angular.element(document).ready(function() {
    var ang_scope = $('#angList').scope();

    window.ANGclear = function(){
      ang_scope.data = [];
      ang_scope.$apply();
    };
    window.ANGpush = function(data){
      ang_scope.data.push(data);
    };
    window.ANGapply = function() {
      ang_scope.$apply();
    };
  });

  ko.applyBindings(KOviewmodel, document.getElementById('koapp'));
  window.KOclear = function (){
    KOData.splice(0, KOData().length);
  };
  window.KOpush = function (data){
    KOData.push(data);
  };


  var reactComp = React.render( React.createElement(ReactComponent, null), document.getElementById('reactMountNode'));

  window.RClear = function() {
    reactComp.setState({data: []})
  };

  window.RPush = function(entry) {
    var stateData = reactComp.state.data;
    stateData.push(entry);
    reactComp.setState({data: stateData});
  }

  m.module(document.getElementById("mithrilMountNode"), mithapp);
  window.Mclear = function() {
    m.startComputation();
    MithrilData.splice(0);
    m.endComputation();
  };

  window.Mpush = function(data) {
    m.startComputation();
    MithrilData.push(data);
    m.endComputation();
  }
  

  var vueInstance = new Vue({
          el: '#vuejsMountNode',
          data: {
                  data: []
          }
  });
  
  window.VueClear = function(){
          vueInstance.data = []
  };

  window.VuePush = function(data){
                vueInstance.data.push(data);
  };
  
  var MagJSData = [];

  var magjsdataNode = {
    view: function(state, props) {
      state.magjsdata = props.MagJSData.map(function(data){
return {span : data }
});
    }
  }
  var magjsapp = {
    view: function(state, props) {
      mag.module("magjsappMountNode",magjsdataNode, props);
    }
  }
  mag.module("magjsapp",magjsapp, {MagJSData:MagJSData});

  window.MagJSclear = function() {
    MagJSData.splice(0);
  };

  window.MagJSpush = function(data) {
    MagJSData.push(data);
  };

  window.MagJSforceRedraw = function(data) {
    mag.redraw(true);
  }
  MagJSclear();
});
</script>

Async

Code *

var polynode=document.getElementById('polynode');
polynode.items=[];
for(var i = 0;i<100;i++)
  polynode.push('items','polymer-'+getId(i));

Test case details

Preparation Code

Test cases

Test #1

Test #2

Test #3

Test #4

Test #5

Test #6

Test #7

Test #8

Test #9