Google Closure Compiler vs Yahoo! YUI Compressor

JavaScript performance comparison

Test case created by Erick Ribeiro

Info

Google Closure Compiler vs Yahoo! YUI Compressor

Preparation code

<input type="text" id="entradaMsg" value="Hello!" class="elIn" placeholder="Digite sua mensagem" /><input type="button" id="enviarMsg" class="botaoCinza" value="Enviar" /><div id="mensagens"></div>

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
Yahoo! YUI Compressor
"use strict";document.getElementById("enviarMsg").onclick=function(){var a=document.getElementById("entradaMsg");if(a.value.trim()!=""){var g=document.createElement("div");g.className="mensagem";var e=document.createElement("div");e.className="info";var f=document.createElement("span");f.className="remetente";var b=document.createTextNode("Erick Ribeiro");f.appendChild(b);var l=document.createElement("span");l.className="horario";var h=new Date();var k=(h.getHours()<10?"0":"")+h.getHours()+":"+(h.getMinutes()<10?"0":"")+h.getMinutes()+":"+(h.getSeconds()<10?"0":"")+h.getSeconds();var m=document.createTextNode(k);l.appendChild(m);var c=document.createElement("div");c.className="textoMsg";var j=document.createTextNode(a.value);c.appendChild(j);e.appendChild(f);e.appendChild(l);g.appendChild(e);g.appendChild(c);var i=document.getElementById("mensagens");if(i.hasChildNodes()){i.insertBefore(g,i.firstChild)}else{i.appendChild(g)}}};
pending…
Google Closure Compiler (Whitespace Only)
document.getElementById("enviarMsg").onclick=function(){var elEntradaMsg=document.getElementById("entradaMsg");if(elEntradaMsg.value.trim()!=""){var domMensagem=document.createElement("div");domMensagem.className="mensagem";var domInfo=document.createElement("div");domInfo.className="info";var domRemetente=document.createElement("span");domRemetente.className="remetente";var txtRemetente=document.createTextNode("Erick Ribeiro");domRemetente.appendChild(txtRemetente);var domHorario=document.createElement("span"); domHorario.className="horario";var d=new Date;var dAtual=(d.getHours()<10?"0":"")+d.getHours()+":"+(d.getMinutes()<10?"0":"")+d.getMinutes()+":"+(d.getSeconds()<10?"0":"")+d.getSeconds();var txtHorario=document.createTextNode(dAtual);domHorario.appendChild(txtHorario);var domTextoMsg=document.createElement("div");domTextoMsg.className="textoMsg";var txtTextoMsg=document.createTextNode(elEntradaMsg.value);domTextoMsg.appendChild(txtTextoMsg);domInfo.appendChild(domRemetente);domInfo.appendChild(domHorario); domMensagem.appendChild(domInfo);domMensagem.appendChild(domTextoMsg);var elMsgs=document.getElementById("mensagens");if(elMsgs.hasChildNodes())elMsgs.insertBefore(domMensagem,elMsgs.firstChild);else elMsgs.appendChild(domMensagem);}};
pending…
Google Closure Compiler (Simple)
document.getElementById("enviarMsg").onclick=function(){var e=document.getElementById("entradaMsg");if(""!=e.value.trim()){var c=document.createElement("div");c.className="mensagem";var b=document.createElement("div");b.className="info";var f=document.createElement("span");f.className="remetente";var d=document.createTextNode("Erick Ribeiro");f.appendChild(d);d=document.createElement("span");d.className="horario";var a=new Date,a=(10>a.getHours()?"0":"")+a.getHours()+":"+(10>a.getMinutes()?"0":"")+ a.getMinutes()+":"+(10>a.getSeconds()?"0":"")+a.getSeconds(),a=document.createTextNode(a);d.appendChild(a);a=document.createElement("div");a.className="textoMsg";var g=document.createTextNode(e.value);a.appendChild(g);b.appendChild(f);b.appendChild(d);c.appendChild(b);c.appendChild(a);b=document.getElementById("mensagens");b.hasChildNodes()?b.insertBefore(c,b.firstChild):b.appendChild(c);}};
pending…
Google Closure Compiler (Advanced)
document.getElementById("enviarMsg").onclick=function(){var d=document.getElementById("entradaMsg");if(""!=d.value.trim()){var c=document.createElement("div");c.className="mensagem";var b=document.createElement("div");b.className="info";var e=document.createElement("span");e.className="remetente";e.appendChild(document.createTextNode("Erick Ribeiro"));var f=document.createElement("span");f.className="horario";var a=new Date;f.appendChild(document.createTextNode((10>a.getHours()?"0":"")+a.getHours()+ ":"+(10>a.getMinutes()?"0":"")+a.getMinutes()+":"+(10>a.getSeconds()?"0":"")+a.getSeconds()));a=document.createElement("div");a.className="textoMsg";a.appendChild(document.createTextNode(d.value));b.appendChild(e);b.appendChild(f);c.appendChild(b);c.appendChild(a);b=document.getElementById("mensagens");b.hasChildNodes()?b.insertBefore(c,b.firstChild):b.appendChild(c);}};
pending…
(Original Code)
'use strict';
/*
Enviar mensagem
requer os seguintes elementos: #formMsg, #mensagens
*/

document.getElementById('enviarMsg').onclick = function() {
        //console.time('enviarMsg');
        var elEntradaMsg = document.getElementById('entradaMsg');
        if(elEntradaMsg.value.trim() != '') {
                //div.mensagem{div.info{span.remetente, span.horario}, div.textoMsg}
                var domMensagem = document.createElement('div');
                domMensagem.className = 'mensagem';
                var domInfo = document.createElement('div');
                domInfo.className = 'info';
                var domRemetente = document.createElement('span');
                domRemetente.className = 'remetente';
                var txtRemetente = document.createTextNode('Erick Ribeiro'); //Nome do remetente
                domRemetente.appendChild(txtRemetente);
                var domHorario = document.createElement('span');
                domHorario.className = 'horario';
                //Insere o dígito 0 em horas, minutos e segundos com valor menor que 10
                var d = new Date();
                //Usar dica do site http://dev.opera.com/articles/view/efficient-javascript/?page=2#stringaccumulator
                var dAtual = (d.getHours()<10?'0':'') + d.getHours() + ':' +
                                                                 (d.getMinutes()<10?'0':'') + d.getMinutes() + ':' +
                                                                 (d.getSeconds()<10?'0':'') + d.getSeconds();
                var txtHorario = document.createTextNode(dAtual);
                domHorario.appendChild(txtHorario);
                var domTextoMsg = document.createElement('div');
                domTextoMsg.className = 'textoMsg';
                var txtTextoMsg = document.createTextNode(elEntradaMsg.value);
                //Anexar elementos
                domTextoMsg.appendChild(txtTextoMsg);
                domInfo.appendChild(domRemetente);
                domInfo.appendChild(domHorario);
                domMensagem.appendChild(domInfo);
                domMensagem.appendChild(domTextoMsg);
                //Se houver msgs no elMsgs, insere a nova mensagem antes da primeira mensagem usando o método insertBefore
                //Se não houver msgs, insere a apenas insere a nova mensagem usando o método appendChild
                var elMsgs = document.getElementById('mensagens');
                if(elMsgs.hasChildNodes()) {
                        elMsgs.insertBefore(domMensagem, elMsgs.firstChild)
                } else {
                        elMsgs.appendChild(domMensagem);
                }
        }
        //console.timeEnd('enviarMsg');
};
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:

1 comment

Satya Prakash commented :

In FF 25 and Chrome 30, all 4 are same! Most of the places it is same.

Add a comment