unminified vs minified vs no WhiteSpace

JavaScript performance comparison

Revision 2 of this test case created by tomByrer

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
no WS
var touchEvents=["touchmove","touchend","touchcancel","mousemove","mouseup"],otherEvents=["touchstart","mousedown"];function updateTapListeners(element,obj,add){for(var i=touchEvents.length-1;i>=0;i--)if(add)element.addEventListener(touchEvents[i],obj,false);else element.removeEventListener(touchEvents[i],obj,false)}
function Tap(el){if(!el)return;var _this=this||1,element=typeof el==="object"?el:document.getElementById(el);_this.element=element;_this.moved=false;_this.startX=0;_this.startY=0;_this.hteo=false;element.addEventListener(otherEvents[0],_this,false);element.addEventListener(otherEvents[1],_this,false)}
Tap.prototype.start=function(e){var _this=this||1,element=_this.element;if(e.type===otherEvents[0])_this.hteo=true;_this.moved=false;_this.startX=e.type===otherEvents[0]?e.touches[0].clientX:e.clientX;_this.startY=e.type===otherEvents[0]?e.touches[0].clientY:e.clientY;updateTapListeners(element,_this,true)};
Tap.prototype.move=function(e){var x=e.type===touchEvents[0]?e.touches[0].clientX:e.clientX,y=e.type===touchEvents[0]?e.touches[0].clientY:e.clientY;if(Math.abs(x-this.startX)>10||Math.abs(y-this.startY)>10)this.moved=true};
Tap.prototype.end=function(e){var _this=this||1,element=_this.element,evt;if(_this.hteo&&e.type===touchEvents[4]){e.preventDefault();e.stopPropagation();_this.hteo=false;return}if(!_this.moved){if(typeof CustomEvent==="function")evt=new CustomEvent("tap",{bubbles:true,cancelable:true});else{evt=document.createEvent("Event");evt.initEvent("tap",true,true)}e.target.dispatchEvent(evt)}updateTapListeners(element,_this,false)};
Tap.prototype.cancel=function(e){var _this=this||1,element=_this.element;_this.moved=false;_this.startX=0;_this.startY=0;updateTapListeners(element,_this,false)};
Tap.prototype.handleEvent=function(e){var _this=this||1;switch(e.type){case otherEvents[0]:_this.start(e);break;case touchEvents[0]:_this.move(e);break;case touchEvents[1]:_this.end(e);break;case touchEvents[2]:_this.cancel(e);break;case otherEvents[1]:_this.start(e);break;case touchEvents[3]:_this.move(e);break;case touchEvents[4]:_this.end(e);break}};document.addEventListener(touchEvents[0],function(c){c.preventDefault()},false);
try{var tap=new Tap,e={};tap.move(e);tap.start(e);tap.end(e);tap.cancel(e);tap.handleEvent(e)}catch(err){};
pending…
minified
var c=["touchmove","touchend","touchcancel","mousemove","mouseup"],e=["touchstart","mousedown"];function f(a,b,g){for(var d=c.length-1;0<=d;d--)g?a.addEventListener(c[d],b,!1):a.removeEventListener(c[d],b,!1)}function h(a){if(a){var b=this||1;a="object"===typeof a?a:document.getElementById(a);b.element=a;b.a=!1;b.c=0;b.d=0;b.b=!1;a.addEventListener(e[0],b,!1);a.addEventListener(e[1],b,!1)}}
h.prototype.start=function(a){var b=this||1,g=b.element;a.type===e[0]&&(b.b=!0);b.a=!1;b.c=a.type===e[0]?a.touches[0].clientX:a.clientX;b.d=a.type===e[0]?a.touches[0].clientY:a.clientY;f(g,b,!0)};h.prototype.move=function(a){var b=a.type===c[0]?a.touches[0].clientY:a.clientY;if(10<Math.abs((a.type===c[0]?a.touches[0].clientX:a.clientX)-this.c)||10<Math.abs(b-this.d))this.a=!0};
h.prototype.end=function(a){var b=this||1,g=b.element,d;b.b&&a.type===c[4]?(a.preventDefault(),a.stopPropagation(),b.b=!1):(b.a||("function"===typeof CustomEvent?d=new CustomEvent("tap",{bubbles:!0,cancelable:!0}):(d=document.createEvent("Event"),d.initEvent("tap",!0,!0)),a.target.dispatchEvent(d)),f(g,b,!1))};h.prototype.cancel=function(){var a=this||1,b=a.element;a.a=!1;a.c=0;a.d=0;f(b,a,!1)};
h.prototype.handleEvent=function(a){var b=this||1;switch(a.type){case e[0]:b.start(a);break;case c[0]:b.move(a);break;case c[1]:b.end(a);break;case c[2]:b.cancel(a);break;case e[1]:b.start(a);break;case c[3]:b.move(a);break;case c[4]:b.end(a)}};document.addEventListener(c[0],function(a){a.preventDefault()},!1);try{var k=new h,l={};k.move(l);k.start(l);k.end(l);k.cancel(l);k.handleEvent(l)}catch(m){};
pending…
source
/*
 *
 * Find more about this plugin by visiting
 * http://alxgbsn.co.uk/
 *
 * Copyright (c) 2013 Alex Gibson, http://alxgbsn.co.uk/
 * Released under MIT license
 *
 */


//https://github.com/alexgibson/tap.js
//XP: Rewriten to make it work for google advanced compilation

var touchEvents = ["touchmove", "touchend", "touchcancel", "mousemove", "mouseup"],
    otherEvents = ["touchstart", "mousedown"];

  function updateTapListeners(element, obj, add) {
    for (var i = touchEvents.length - 1; i >= 0; i--) {
      if (add) {
        element.addEventListener(touchEvents[i], obj, false);
      } else {
        element.removeEventListener(touchEvents[i], obj, false);
      }
    }
  }

  /**
   * Tap handler
   * @param {(Object|string)=} el Node id or name (optional).
   * @constructor
   */

  function Tap(el) {
    if(!el) { return; }
   
    var _this = this || 1,
        element = (typeof el === 'object' ? el : document.getElementById(el));
   
    _this.element = element;
    _this.moved = false; //flags if the finger has moved
    _this.startX = 0; //starting x coordinate
    _this.startY = 0; //starting y coordinate
    _this.hteo = false; //flag touch event
    element.addEventListener(otherEvents[0], _this, false);
    element.addEventListener(otherEvents[1], _this, false);
  }

  //start        
  Tap.prototype.start = function(e) {
    var _this = this || 1,
        element = _this.element;

    if (e.type === otherEvents[0]) {
      _this.hteo = true;
    }
    _this.moved = false;
    _this.startX = e.type === otherEvents[0] ? e.touches[0].clientX : e.clientX;
    _this.startY = e.type === otherEvents[0] ? e.touches[0].clientY : e.clientY;
    updateTapListeners(element, _this, true);
  };

  //move  
  Tap.prototype.move = function(e) {
    var x = e.type === touchEvents[0] ? e.touches[0].clientX : e.clientX,
      y = e.type === touchEvents[0] ? e.touches[0].clientY : e.clientY;

    //if finger moves more than 10px flag to cancel
    if (Math.abs(x - this.startX) > 10 || Math.abs(y - this.startY) > 10) {
      this.moved = true;
    }
  };

  /**
   * End
   * @suppress {checkTypes}
   */

  Tap.prototype.end = function(e) {
    var _this = this || 1,
        element = _this.element,
        evt;

    if (_this.hteo && e.type === touchEvents[4]) {
      e.preventDefault();
      e.stopPropagation();
      _this.hteo = false;
      return;
    }

    if (!_this.moved) {
      //create custom event
      if (typeof CustomEvent === "function") {
        evt = new CustomEvent('tap', {
          bubbles: true,
          cancelable: true
        });
      } else {
        evt = document.createEvent('Event');
        evt.initEvent('tap', true, true);
      }
      e.target.dispatchEvent(evt);
    }
    updateTapListeners(element, _this, false);
  };

  //touchcancel
  Tap.prototype.cancel = function(e) {
    var _this = this || 1,
        element = _this.element;

    //reset state
    _this.moved = false;
    _this.startX = 0;
    _this.startY = 0;
    updateTapListeners(element, _this, false);
  };

  Tap.prototype.handleEvent = function(e) {
    var _this = this || 1;
    switch (e.type) {
      case otherEvents[0]:
        _this.start(e);
        break;
      case touchEvents[0]:
        _this.move(e);
        break;
      case touchEvents[1]:
        _this.end(e);
        break;
      case touchEvents[2]:
        _this.cancel(e);
        break;
      case otherEvents[1]:
        _this.start(e);
        break;
      case touchEvents[3]:
        _this.move(e);
        break;
      case touchEvents[4]:
        _this.end(e);
        break;
    }
  };

  //public function
  //_window.Tap = Tap;

  document.addEventListener(touchEvents[0], function(c) {
    c.preventDefault()
  }, false);


  //XP: Added to make it work with google closure compiler ( prevent deadcode removal )
  try {
    var tap = new Tap(), e = {};
    tap.move(e);
    tap.start(e);
    tap.end(e);
    tap.cancel(e);
    tap.handleEvent(e);
  }catch(err) {
    // Do nothing
  }
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:

2 comments

tomByrer (revision owner) commented :

These tests done on same 1st gen i7 laptop. Could not complete tests with IE10; chokes on NoWS

[{"UserAgent ":"Chrome 32.0.1700","minified ":1.332,"no WS ":1.741,"source ":4.034,"# Tests ":3}, {"UserAgent ":"Chrome 34.0.1847","minified ":3.674,"no WS ":6.482,"source ":2.849,"# Tests ":1}, {"UserAgent ":"Pale Moon (Firefox Variant) 24.2.2","minified ":2.713,"no WS ":4.617,"source ":2.094,"# Tests ":1}, {"UserAgent ":"Pale Moon (Firefox Variant) 24.4.1","minified ":2.463,"no WS ":4.502,"source ":1.985,"# Tests ":1}]

tomByrer (revision owner) commented :

Warning: seems to lock-up on IE10.

Add a comment