JSFiddle - React, Tailwind, and code Playground

by ariehg

HTML

<ul id='result'></ul>

JavaScript

var obj1 = {
    events : []
    , addEvent :  function(fn){
        this.events.push(fn);
    }
    , fireEvent  : function(){
        for (var i=0,fn; fn = this.events[i++];i) setTimeout(fn);
    }
};

var obj2 = {
    el : document.createElement('div')
    , addEvent : function(fn){
        this.el.addEventListener('cost',fn,false);
    }
    , fireEvent : function(){
        var ev = document.createEvent("UIEvents");
        ev.initUIEvent('cost',true,true,window,1);
        this.el.dispatchEvent(ev);
    }
};


for (var i =0; i<1000; i++){
    obj1.addEvent(function(){console.log('a');});
    obj2.addEvent(function(){console.log('a');});
}

obj1.addEvent(finish1);
obj2.addEvent(finish2);

var start
    , result = document.getElementById('result')
    , el1 = document.createElement('li')
    , el2 = document.createElement('li');

result.appendChild(el1);
result.appendChild(el2);

function start1(){
    start = +new Date;
    obj1.fireEvent();
}

function start2(){
    start = +new Date;
    obj2.fireEvent();
}

function finish1(){
    var f = +new Date;
    el1.innerHTML = 'non-dom: ' + (f-start);
    start2();
}

function finish2(){
    var f = +new Date;
    el2.innerHTML = 'dom: ' + (f-start);
}

start1();