Adding Listeners in JavaScript

JavaScript performance comparison

Revision 35 of this test case created by Bruno Astolfi and last updated

Info

Senhores, notei uma pequena diferença entre o uso de 'click' em relação ao uso de um evento personalizado (por exemplo: 'myEvent'). Em todos os casos o jQuery foi superior, mas vale testar um pouco melhor os casos de eventos existentes contra eventos personalizados.

PS.: I can't create 'Adding Listeners in JavaScript' as a new topic, its not a new release about creating elements. Sorry for it.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
 
<script>
Benchmark.prototype.setup = function() {
    var J = jQuery.noConflict();
    var element = document.createElement('div');
    var func = function() {
      console.log('test');
    };
    var func2 = function(event) {
      console.log(event);
    }
};

Benchmark.prototype.teardown = function() {
    element.click();
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery (bind)
J("#element").bind('click', function() {
  console.log('test');
});
pending…
Prototype
$(element).observe('click', function() {
  console.log('test');
});
pending…
JavaScript (nature) XXX
var func3 = function() {
  console.log('test');
};

element.addEventListener('click', func3, false);
pending…
jQuery (click)
J("#element").click(function() {
  console.log('test');
});
pending…
jQuery (bind + not closure)
J("#element").bind('click', func);
pending…
jQuery (click + not closure)
J("#element").click(func);
pending…
JavaScript (nature + not closure)
element.addEventListener('click', func, false);
pending…
Prototype (not closure)
$(element).observe('click', func);
pending…
Prototype (not closure + target)
$(element).observe('click', func2);
pending…
JavaScript (nature + not closure + target)
element.addEventListener('click', func2, false);
pending…
jQuery (not closure + target)
J("#element").bind('click', func2);
pending…
Create 1
var e = document.createElement('div');
e.id = 'id';
e.class = 'class';
e.innerHTML = 'some Text';

var $e = $(e);
pending…
Create 2
var e = document.createElement('div');
e.setAttribute('id','id');
e.addClassName('class');
var et = document.createTextNode('some Text');
e.appendChild(et);
var $e = $(e);
pending…
Create 3
var e = document.createElement('div');
e.setAttribute('id','id');
e.addClassName('class');
e.textContent = 'some Text';
var $e = $(e);
pending…
Div ++ (appendChild)
var e = document.createElement('div');
e.setAttribute('id','id');
e.addClassName('class');
e.textContent = 'some Text';
var $e = $(e);

var a = document.createElement('div');
a.addClassName('class');
a.textContent = 'some Text';
var $a = $(a);

e.appendChild(a);
pending…
Div ++ (update)
var e = document.createElement('div');
e.setAttribute('id','id');
e.addClassName('class');
e.textContent = 'some Text';
var $e = $(e);

var a = document.createElement('div');
a.addClassName('class');
a.textContent = 'some Text';
var $a = $(a);

e.update(a);
pending…
CreateElement
var e = document.createElement('div');
e.setAttribute('id','id');
e.addClassName('class');
e.textContent = 'some Text';
var $e = $(e);
pending…
new Element
var e = new Element('div');
e.setAttribute('id','id');
e.addClassName('class');
e.textContent = 'some Text';
var $e = $(e);
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. Here’s a list of current revisions for this page:

0 comments

Add a comment