JS vs Zepto

Benchmark created by Jakub on


Description

Native JS vs Zepto

Preparation HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div class="class">innerHTML</div>
<div></div>
<div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div id="id">innerHTML</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div class="class"></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<script>
  //     Zepto.js
  //     (c) 2010, 2011 Thomas Fuchs
  //     Zepto.js may be freely distributed under the MIT license.
  (function(a){String.prototype.trim===a&&(String.prototype.trim=function(){return this.replace(/^\s+/,"").replace(/\s+$/,"")}),Array.prototype.reduce===a&&(Array.prototype.reduce=function(b){if(this===void 0||this===null)throw new TypeError;var c=Object(this),d=c.length>>>0,e=0,f;if(typeof b!="function")throw new TypeError;if(d==0&&arguments.length==1)throw new TypeError;if(arguments.length>=2)f=arguments[1];else do{if(e in c){f=c[e++];break}if(++e>=d)throw new TypeError}while(!0);while(e<d)e in c&&(f=b.call(a,f,c[e],e,c)),e++;return f})})();var Zepto=function(){function K(a,c){c(a);for(b in a.childNodes)K(a.childNodes[b],c)}function J(a,b,c){var d=!a||a==3?b:b.parentNode;d.insertBefore(c,a?a==1?b.nextSibling:a==2?b:null:d.firstChild)}function I(a,b,c,d){return s(b)?b.call(a,c,d):b}function H(b,c){return c===a?G(b):G(b).filter(c)}function G(b,d){if(!b)return F();if(d!==a)return G(d).find(b);if(s(b))return G(g).ready(b);if(b instanceof F)return b;var e;u(b)?e=w(b):m.indexOf(b.nodeType)>=0||b===window?(e=[b],b=null):l.test(b)?(e=E(b,RegExp.$1),b=null):b.nodeType&&b.nodeType==3?e=[b]:e=c(g,b);return F(e,b)}function F(a,b){a=a||e,a.__proto__=F.prototype,a.selector=b||"";return a}function E(b,c){c===a&&l.test(b)&&RegExp.$1,c in r||(c="*");var d=r[c];d.innerHTML=""+b;return f.call(d.childNodes)}function D(a){var b,c;h[a]||(b=g.createElement(a),g.body.appendChild(b),c=j(b,"").getPropertyValue("display"),b.parentNode.removeChild(b),c=="none"&&(c="block"),h[a]=c);return h[a]}function C(a,b){return typeof b=="number"&&!k[z(a)]?b+"px":b}function B(a){return a in i?i[a]:i[a]=new RegExp("(^|\\s)"+a+"(\\s|$)")}function A(a){return a.filter(function(a,b,c){return c.indexOf(a)==b})}function z(a){return a.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}function y(a){return a.replace(/-+(.)?/g,function(a,b){return b?b.toUpperCase():""})}function x(a){return a.length>0?[].concat.apply([],a):a}function w(b){return b.filter(function(b){return b!==a&&b!==null})}function v(a){return typeof a.length=="number"}function u(a){return a instanceof Array}function t(a){return a instanceof Object}function s(a){return{}.toString.call(a)=="[object Function]"}var a,b,c,d,e=[],f=e.slice,g=window.document,h={},i={},j=g.defaultView.getComputedStyle,k={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},l=/^\s*<(\w+)[^>]*>/,m=[1,9,11],n=["prepend","after","before","append"],o=["append","prepend"],p=g.createElement("table"),q=g.createElement("tr"),r={tr:g.createElement("tbody"),tbody:p,thead:p,tfoot:p,td:q,th:q,"*":g.createElement("div")};G.extend=function(a){f.call(arguments,1).forEach(function(c){for(b in c)a[b]=c[b]});return a},G.qsa=c=function(a,b){return f.call(a.querySelectorAll(b))},G.isFunction=s,G.isObject=t,G.isArray=u,G.map=function(a,b){var c,d=[],e,f;if(v(a))for(e=0;e<a.length;e++)c=b(a[e],e),c!=null&&d.push(c);else for(f in a)c=b(a[f],f),c!=null&&d.push(c);return x(d)},G.each=function(a,b){var c,d;if(v(a)){for(c=0;c<a.length;c++)if(b(c,a[c])===!1)return a}else for(d in a)if(b(d,a[d])===!1)return a;return a},G.fn={forEach:e.forEach,reduce:e.reduce,push:e.push,indexOf:e.indexOf,concat:e.concat,map:function(a){return G.map(this,function(b,c){return a.call(b,c,b)})},slice:function(){return G(f.apply(this,arguments))},ready:function(a){(g.readyState=="complete"||g.readyState=="loaded")&&a(),g.addEventListener("DOMContentLoaded",a,!1);return this},get:function(b){return b===a?this:this[b]},size:function(){return this.length},remove:function(){return this.each(function(){this.parentNode!=null&&this.parentNode.removeChild(this)})},each:function(a){this.forEach(function(b,c){a.call(b,c,b)});return this},filter:function(a){return G([].filter.call(this,function(b){return c(b.parentNode,a).indexOf(b)>=0}))},end:function(){return this.prevObject||G()},add:function(a,b){return G(A(this.concat(G(a,b))))},is:function(a){return this.length>0&&G(this[0]).filter(a).length>0},not:function(b){var c=[];if(s(b)&&b.call!==a)this.each(function(a){b.call(this,a)||c.push(this)});else{var d=typeof b=="string"?this.filter(b):v(b)&&s(b.item)?f.call(b):G(b);this.forEach(function(a){d.indexOf(a)<0&&c.push(a)})}return G(c)},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return G(this[0])},last:function(){return G(this[this.length-1])},find:function(a){var b;this.length==1?b=c(this[0],a):b=this.map(function(){return c(this,a)});return G(b)},closest:function(b,d){var e=this[0],f=c(d!==a?d:g,b);f.length===0&&(e=null);while(e&&e!==g&&f.indexOf(e)<0)e=e.parentNode;return G(e!==g&&e)},parents:function(a){var b=[],c=this;while(c.length>0)c=G.map(c,function(a){if((a=a.parentNode)&&a!==g&&b.indexOf(a)<0){b.push(a);return a}});return H(b,a)},parent:function(a){return H(A(this.pluck("parentNode")),a)},children:function(a){return H(this.map(function(){return f.call(this.children)}),a)},siblings:function(a){return H(this.map(function(a,b){return f.call(b.parentNode.children).filter(function(a){return a!==b})}),a)},empty:function(){return this.each(function(){this.innerHTML=""})},pluck:function(a){return this.map(function(){return this[a]})},show:function(){return this.each(function(){this.style.display=="none"&&(this.style.display=null),j(this,"").getPropertyValue("display")=="none"&&(this.style.display=D(this.nodeName))})},replaceWith:function(a){return this.each(function(){var b=this.parentNode,c=this.nextSibling;G(this).remove(),c?G(c).before(a):G(b).append(a)})},wrap:function(a){return this.each(function(){G(this).wrapAll(G(a)[0].cloneNode(!1))})},wrapAll:function(a){this[0]&&(G(this[0]).before(a=G(a)),a.append(this));return this},unwrap:function(){this.parent().each(function(){G(this).replaceWith(G(this).children())});return this},hide:function(){return this.css("display","none")},toggle:function(b){return(b===a?this.css("display")=="none":b)?this.show():this.hide()},prev:function(){return G(this.pluck("previousElementSibling"))},next:function(){return G(this.pluck("nextElementSibling"))},html:function(b){return b===a?this.length>0?this[0].innerHTML:null:this.each(function(a){var c=this.innerHTML;G(this).empty().append(I(this,b,a,c))})},text:function(b){return b===a?this.length>0?this[0].textContent:null:this.each(function(){this.textContent=b})},attr:function(c,d){return typeof c=="string"&&d===a?this.length>0&&this[0].nodeName=="INPUT"&&this[0].type=="text"&&c=="value"?this.val():this.length>0?this[0].getAttribute(c)||(c in this[0]?this[0][c]:a):a:this.each(function(a){if(t(c))for(b in c)this.setAttribute(b,c[b]);else this.setAttribute(c,I(this,d,a,this.getAttribute(c)))})},removeAttr:function(a){return this.each(function(){this.removeAttribute(a)})},data:function(a,b){return this.attr("data-"+a,b)},val:function(b){return b===a?this.length>0?this[0].value:null:this.each(function(){this.value=b})},offset:function(){if(this.length==0)return null;var a=this[0].getBoundingClientRect();return{left:a.left+g.body.scrollLeft,top:a.top+g.body.scrollTop,width:a.width,height:a.height}},css:function(c,d){if(d===a&&typeof c=="string")return this[0].style[y(c)]||j(this[0],"").getPropertyValue(c);var e="";for(b in c)e+=z(b)+":"+C(b,c[b])+";";typeof c=="string"&&(e=z(c)+":"+C(c,d));return this.each(function(){this.style.cssText+=";"+e})},index:function(a){return a?this.indexOf(G(a)[0]):this.parent().children().indexOf(this[0])},hasClass:function(a){return this.length<1?!1:B(a).test(this[0].className)},addClass:function(a){return this.each(function(b){d=[];var c=this.className,e=I(this,a,b,c);e.split(/\s+/g).forEach(function(a){G(this).hasClass(a)||d.push(a)},this),d.length&&(this.className+=(c?" ":"")+d.join(" "))})},removeClass:function(b){return this.each(function(c){if(b===a)return this.className="";d=this.className,I(this,b,c,d).split(/\s+/g).forEach(function(a){d=d.replace(B(a)," ")}),this.className=d.trim()})},toggleClass:function(b,c){return this.each(function(d){var e=this.className,f=I(this,b,d,e);c!==a&&!c||G(this).hasClass(f)?G(this).removeClass(f):G(this).addClass(f)})}},"filter,add,not,eq,first,last,find,closest,parents,parent,children,siblings".split(",").forEach(function(a){var b=G.fn[a];G.fn[a]=function(){var a=b.apply(this,arguments);a.prevObject=this;return a}}),["width","height"].forEach(function(b){G.fn[b]=function(c){var d;return c===a?(d=this.offset())&&d[b]:this.css(b,c)}}),n.forEach(function(a,b){G.fn[a]=function(a){var c=typeof a=="object"?a:E(a);"length"in c||(c=[c]);if(c.length<1)return this;var d=this.length,e=d>1,f=b<2;return this.each(function(a,g){for(var h=0;h<c.length;h++){var i=c[f?c.length-h-1:h];K(i,function(a){a.nodeName!=null&&a.nodeName.toUpperCase()==="SCRIPT"&&window.eval.call(window,a.innerHTML)}),e&&a<d-1&&(i=i.cloneNode(!0)),J(b,g,i)}})}}),o.forEach(function(a){G.fn[a+"To"]=function(b){typeof b!="object"&&(b=G(b)),b[a](this);return this}}),F.prototype=G.fn;return G}();"$"in window||(window.$=Zepto),function(a){function n(b){var c=a.extend({originalEvent:b},b);a.each(m,function(a,d){c[a]=function(){this[d]=k;return b[a].apply(b,arguments)},c[d]=l});return c}function j(a,b,d,g){var h=e(a);(b||"").split(/\s/).forEach(function(b){f(a,b,d,g).forEach(function(b){delete c[h][b.i],a.removeEventListener(b.e,b.proxy,!1)})})}function i(b,d,f,h,i){var j=e(b),k=c[j]||(c[j]=[]);d.split(/\s/).forEach(function(c){var d=i||f,e=function(a){var c=d.apply(b,[a].concat(a.data));c===!1&&a.preventDefault();return c},j=a.extend(g(c),{fn:f,proxy:e,sel:h,del:i,i:k.length});k.push(j),b.addEventListener(j.e,e,!1)})}function h(a){return new RegExp("(?:^| )"+a.replace(" "," .* ?")+"(?: |$)")}function g(a){var b=(""+a).split(".");return{e:b[0],ns:b.slice(1).sort().join(" ")}}function f(a,b,d,f){b=g(b);if(b.ns)var i=h(b.ns);return(c[e(a)]||[]).filter(function(a){return a&&(!b.e||a.e==b.e)&&(!b.ns||i.test(a.ns))&&(!d||a.fn==d)&&(!f||a.sel==f)})}function e(a){return a._zid||(a._zid=d++)}var b=a.qsa,c={},d=1;a.event={add:i,remove:j},a.fn.bind=function(a,b){return this.each(function(){i(this,a,b)})},a.fn.unbind=function(a,b){return this.each(function(){j(this,a,b)})},a.fn.one=function(a,b){return this.each(function(){var c=this;i(this,a,function(e){b.call(c,e),j(c,a,arguments.callee)})})};var k=function(){return!0},l=function(){return!1},m={preventDefault:"isDefaultPrevented",stopImmediatePropagation:"isImmediatePropagationStopped",stopPropagation:"isPropagationStopped"};a.fn.delegate=function(c,d,e){return this.each(function(f,g){i(g,d,e,c,function(d,f){var h=d.target,i=b(g,c);while(h&&i.indexOf(h)<0)h=h.parentNode;h&&h!==g&&h!==document&&e.call(h,a.extend(n(d),{currentTarget:h,liveFired:g}),f)})})},a.fn.undelegate=function(a,b,c){return this.each(function(){j(this,b,c,a)})},a.fn.live=function(b,c){a(document.body).delegate(this.selector,b,c);return this},a.fn.die=function(b,c){a(document.body).undelegate(this.selector,b,c);return this},a.fn.trigger=function(b,c){typeof b=="string"&&(b=a.Event(b)),b.data=c;return this.each(function(){this.dispatchEvent(b)})},a.fn.triggerHandler=function(b,c){var d,e;this.each(function(g,h){d=n(typeof b=="string"?a.Event(b):b),d.data=c,d.target=h,a.each(f(h,b.type||b),function(a,b){e=b.proxy(d);if(d.isImmediatePropagationStopped())return!1})});return e},"focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout change select keydown keypress keyup error".split(" ").forEach(function(b){a.fn[b]=function(a){return this.bind(b,a)}}),["focus","blur"].forEach(function(b){a.fn[b]=function(a){if(a)this.bind(b,a);else if(this.length)try{this.get(0)[b]()}catch(c){}return this}}),a.Event=function(b,c){var d=document.createEvent("Events");c&&a.extend(d,c),d.initEvent(b,!c||c.bubbles!==!1,!0);return d}}(Zepto),function(a){function b(a){var a=a,b={},c=a.match(/(Android)\s+([\d.]+)/),d=a.match(/(iPad).*OS\s([\d_]+)/),e=!d&&a.match(/(iPhone\sOS)\s([\d_]+)/),f=a.match(/(webOS|hpwOS)[\s\/]([\d.]+)/),g=f&&a.match(/TouchPad/),h=a.match(/(BlackBerry).*Version\/([\d.]+)/);c&&(b.android=!0,b.version=c[2]),e&&(b.ios=!0,b.version=e[2].replace(/_/g,"."),b.iphone=!0),d&&(b.ios=!0,b.version=d[2].replace(/_/g,"."),b.ipad=!0),f&&(b.webos=!0,b.version=f[2]),g&&(b.touchpad=!0),h&&(b.blackberry=!0,b.version=h[2]);return b}a.os=b(navigator.userAgent),a.__detect=b;var c=navigator.userAgent.match(/WebKit\/([\d.]+)/);a.browser=c?{webkit:!0,version:c[1]}:{webkit:!1}}(Zepto),function(a,b){var c=["scale","scaleX","scaleY","translate","translateX","translateY","translate3d","skew","skewX","skewY","rotate","rotateX","rotateY","rotateZ","rotate3d","matrix"];a.fn.anim=function(a,d,e,f){var g=[],h={},i,j=this,k;for(i in a)c.indexOf(i)>=0?g.push(i+"("+a[i]+")"):h[i]=a[i];k=function(){j.css({"-webkit-transition":"none"}),f&&f()},d>0?this.one("webkitTransitionEnd",k):setTimeout(k,0),g.length>0&&(h["-webkit-transform"]=g.join(" ")),h["-webkit-transition"]="all "+(d!==b?d:.5)+"s "+(e||""),setTimeout(function(){j.css(h)},0);return this}}(Zepto),function(a){function e(){}var b=0,c=a.isObject,d;a.ajaxJSONP=function(c){var d="jsonp"+ ++b,e=document.createElement("script");window[d]=function(a){c.success(a),delete window[d]},e.src=c.url.replace(/=\?/,"="+d),a("head").append(e)},a.ajaxSettings={type:"GET",beforeSend:e,success:e,error:e,complete:e,accepts:{script:"text/javascript, application/javascript",json:"application/json",xml:"application/xml, text/xml",html:"text/html",text:"text/plain"}},a.ajax=function(b){b=b||{};var e=a.extend({},b);for(d in a.ajaxSettings)e[d]||(e[d]=a.ajaxSettings[d]);if(/=\?/.test(e.url))return a.ajaxJSONP(e);e.url||(e.url=window.location.toString()),e.data&&!e.contentType&&(e.contentType="application/x-www-form-urlencoded"),c(e.data)&&(e.data=a.param(e.data));if(e.type.match(/get/i)&&e.data){var f=e.data;e.url.match(/\?.*=/)?f="&"+f:f[0]!="?"&&(f="?"+f),e.url+=f}var g=e.accepts[e.dataType],h=new XMLHttpRequest;e.headers=a.extend({"X-Requested-With":"XMLHttpRequest"},e.headers||{}),g&&(e.headers.Accept=g),h.onreadystatechange=function(){if(h.readyState==4){var a,b=!1;if(h.status>=200&&h.status<300||h.status==0){if(g=="application/json"&&h.responseText!="")try{a=JSON.parse(h.responseText)}catch(c){b=c}else a=h.responseText;b?e.error(h,"parsererror",b):e.success(a,"success",h)}else b=!0,e.error(h,"error");e.complete(h,b?"error":"success")}},h.open(e.type,e.url,!0);if(e.beforeSend(h,e)===!1){h.abort();return!1}e.contentType&&(e.headers["Content-Type"]=e.contentType);for(name in e.headers)h.setRequestHeader(name,e.headers[name]);h.send(e.data);return h},a.get=function(b,c){a.ajax({url:b,success:c})},a.post=function(b,c,d,e){a.isFunction(c)&&(e=e||d,d=c,c=null),a.ajax({type:"POST",url:b,data:c,success:d,dataType:e})},a.getJSON=function(b,c){a.ajax({url:b,success:c,dataType:"json"})},a.fn.load=function(b,c){if(!this.length)return this;var d=this,e=b.split(/\s/),f;e.length>1&&(b=e[0],f=e[1]),a.get(b,function(b){d.html(f?a(document.createElement("div")).html(b).find(f).html():b),c&&c()});return this},a.param=function(b,e){var f=[],g=function(a,b){f.push(encodeURIComponent(e?e+"["+a+"]":a)+"="+encodeURIComponent(b))},h=a.isArray(b);for(d in b)c(b[d])?f.push(a.param(b[d],e?e+"["+d+"]":d)):g(h?"":d,b[d]);return f.join("&").replace("%20","+")}}(Zepto),function(a){a.fn.serializeArray=function(){var b=[],c;a(Array.prototype.slice.call(this.get(0).elements)).each(function(){c=a(this),(c.attr("type")!=="radio"||c.is(":checked"))&&(c.attr("type")!=="checkbox"||!!c.is(":checked"))&&b.push({name:c.attr("name"),value:c.val()})});return b},a.fn.serialize=function(){var a=[];this.serializeArray().forEach(function(b){a.push(encodeURIComponent(b.name)+"="+encodeURIComponent(b.value))});return a.join("&")},a.fn.submit=function(b){if(b)this.bind("submit",b);else if(this.length){var c=a.Event("submit");this.eq(0).trigger(c),c.defaultPrevented||this.get(0).submit()}return this}}(Zepto),function(a){function g(){b.last&&Date.now()-b.last>=f&&(a(b.target).trigger("longTap"),b={})}function e(a,b,c,d){var e=Math.abs(a-b),f=Math.abs(c-d);return e>=f?a-b>0?"Left":"Right":c-d>0?"Up":"Down"}function d(a){return"tagName"in a?a:a.parentNode}var b={},c,f=750;a(document).ready(function(){a(document.body).bind("touchstart",function(a){var e=Date.now(),h=e-(b.last||e);b.target=d(a.touches[0].target),c&&clearTimeout(c),b.x1=a.touches[0].pageX,b.y1=a.touches[0].pageY,h>0&&h<=250&&(b.isDoubleTap=!0),b.last=e,setTimeout(g,f)}).bind("touchmove",function(a){b.x2=a.touches[0].pageX,b.y2=a.touches[0].pageY}).bind("touchend",function(d){b.isDoubleTap?(a(b.target).trigger("doubleTap"),b={}):b.x2>0||b.y2>0?((Math.abs(b.x1-b.x2)>30||Math.abs(b.y1-b.y2)>30)&&a(b.target).trigger("swipe")&&a(b.target).trigger("swipe"+e(b.x1,b.x2,b.y1,b.y2)),b.x1=b.x2=b.y1=b.y2=b.last=0):"last"in b&&(c=setTimeout(function(){c=null,a(b.target).trigger("tap"),b={}},250))}).bind("touchcancel",function(){b={}})}),["swipe","swipeLeft","swipeRight","swipeUp","swipeDown","doubleTap","tap","longTap"].forEach(function(b){a.fn[b]=function(a){return this.bind(b,a)}})}(Zepto)
  
  var element, elements;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
element = document.getElementById('id');
element.style.backgroundColor = "black";
element.innerHTML = "BOOM";
element.addEventListener('click', function() {});
ready
getElementsByClassName
elements = document.getElementsByClassName('class');
len = elements.length;
for( var i = 0; i < len; i++ ) {
element = elements[i];
element.style.backgroundColor = "black";
element.innerHTML = "BOOM";
element.addEventListener('click', function() {});
}
 
ready
$('.class')
element = $('.class');
element.css('background-color', 'black').html("BOOM").bind('click',function(){});
ready
$('#id')
element = $('#id');
element.css('background-color', 'black').html("BOOM").bind('click',function(){});
ready

Revisions

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

  • Revision 1: published by Jakub on
  • Revision 2: published by Federico "Lox" Lucignano on
  • Revision 3: published on