jQuery VS AngularJS VS Zepto VS laroux.js VS Native JS

JavaScript performance comparison

Revision 196 of this test case created by J. Abbott

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://zeptojs.com/zepto.min.js"></script>
<script src="http://larukedi.github.io/laroux.js/assets/js/laroux.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/34263055/site/meta-js/build/meta.min.js"></script>

<div id="container"></div>
      
<script>
Benchmark.prototype.setup = function() {
  var container = document.getElementById('container');
  var ul, li, i = 0;
  var msg = "Hello World ";

};

Benchmark.prototype.teardown = function() {
  container.innerHTML = "";

};
</script>

Preparation code output

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="http://zeptojs.com/zepto.min.js"></script> <script src="http://larukedi.github.io/laroux.js/assets/js/laroux.min.js"></script> <script src="https://dl.dropboxusercontent.com/u/34263055/site/meta-js/build/meta.min.js"></script> <div id="container"></div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
jQuery
ul = jQuery("<ul>");
for (; i < 100; i++) {
  ul.append("<li>" + msg + "jQuery</li>");
}
jQuery(container).append(ul);
pending…
AngularJS
ul = angular.element("<ul>");
for (; i < 100; i++) {
  ul.append(angular.element("<li>" + msg + "AngularJS</li>"));
}
angular.element(container).append(ul);
pending…
Zepto
ul = Zepto("<ul>");
for (; i < 100; i++) {
  ul.append("<li>" + msg + "Zepto</li>");
}
Zepto(container).append(ul);
pending…
laroux.js
ul = $l.dom.createElement('UL');
for (; i < 100; i++) {
  $l.dom.append(ul, "<li>" + msg + "laroux.js</li>");
}
$l.dom.append(container, ul);
pending…
Native JS
{
i, ul = document.createElement("ul");
for (; i < 100; i += 1) {
  li = document.createElement("li");
  li.innerText = msg + 'native JS';
  ul.appendChild(li);
}
document.getElementById("container").appendChild(ul);
}
pending…
Meta JS
ul = meta("<ul>");
for (; i < 100; i++) {
  ul.add("lastChild", "<li>" + msg + "Meta JS</li>");
}
meta(container).add("lastChild", ul);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments