jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
<div class="viewport" style="width:400px;height:400px;">
<div id="unique_1" style="width:1400px;height:1400px;" class="scroller">
<img src="http://akhmetelitheatre.ge/cms/scrollbar/img/1.jpg" />
<img src="http://akhmetelitheatre.ge/cms/scrollbar/img/2.jpg" />
<img src="http://akhmetelitheatre.ge/cms/scrollbar/img/3.jpg" />
</div>
</div>function scrollBar(scroller,options) {
var self = this;
/** Define default options **/
self.options =
{
mouseWheel:true,
mouseWheelSpeed:200,
duration:0.35,
trackSize:{vertical:'96%',horizontal:'96%'},
thumbSize:{vertical:null,horizontal:null},
visibleScrollbars:true,
Min:{ vertical:null,horizontal:null},
Max:{ vertical:null,horizontal:null},
enable:{horizontal:true,vertical:true},
/** in easing c = changeInValue,t = time(percent of animation complete),s = start value**/
easing:
{
easeOutSine: function(c,t,s){ return c*Math.sin(t * (Math.PI / 2)) + s },
easeOutQuad: function(c,t,s){ return c*((t=t-1)*t*t + 1) + s },
easeOutQuart: function(c,t,s){ return c*((t=t-1)*t*t*t + 1) + s },
easeOutQuint: function(c,t,s){ return c*((t=t-1)*t*t*t*t + 1) + s },
easeOutCirc: function(c,t,s){ return c*Math.sqrt(1 - (t=t-1)*t) + s }
}
};
/** Extend options **/
for ( var j in options ) {
self.options[j] = options[j];
}
/** Initialize new Instance **/
this.init = function()
{
iniContainer();
_scrollBarInstances.push(self);
}
/** Define properties depending on the container **/
function iniContainer()
{
/** scroller/viewport el's **/
self.scroller = {};
self.scroller.el = typeof scroller === 'string' ? document.querySelector(scroller) : scroller;
self.viewport = {};
self.viewport.el = self.scroller.el.parentNode;
self.viewport.el.setAttribute('gd_scroll','true');
/** property controller **/
self.animatedProperty = {};
/** position controller **/
self.position = { scroller: {} };
/** Min/Max object **/
self.Min = {};
self.Max = {};
/** update contaienr options, create/update scrollbars**/
self.update();
//console.log(self);
}
/** initialize Scrollbar when needed **/
function iniScrollbar()
{
if(self.dimension.horizontal || self.dimension.vertical)
{
self.track = self.track ? self.track : {};
self.thumb = self.thumb ? self.thumb : {};
self.ratio = self.ratio ? self.ratio : {};
self.position.thumb = self.position.thumb ? self.position.thumb : {};
for ( var k in self.dimension )
{
if(self.dimension[''+k+''] !== false)
{
_gd_dim = self.dimension[''+k+''];
self.track[''+_gd_dim+''] = self.track[''+_gd_dim+''] ? self.track[''+_gd_dim+''] : {};
self.thumb[''+_gd_dim+''] = self.thumb[''+_gd_dim+''] ? self.thumb[''+_gd_dim+''] : {};
self.track[''+_gd_dim+''].el = self.track[''+_gd_dim+''].el ? self.track[''+_gd_dim+''].el : document.createElement('div');
self.thumb[''+_gd_dim+''].el = self.thumb[''+_gd_dim+''].el ? self.thumb[''+_gd_dim+''].el : document.createElement('div');
if(self.track[''+_gd_dim+''].el.parentNode !== self.viewport)
{
self.track[''+_gd_dim+''].el.appendChild(self.thumb[''+_gd_dim+''].el);
self.viewport.el.appendChild(self.track[''+_gd_dim+''].el);
self.track[''+_gd_dim+''].el.setAttribute('class','track_'+_gd_dim+'');
self.thumb[''+_gd_dim+''].el.setAttribute('class','thumb_'+_gd_dim+'');
}
self.track[''+_gd_dim+''].styleSize = self.options.trackSize[''+_gd_dim+''];
self.thumb[''+_gd_dim+''].styleSize =
self.options.thumbSize[''+_gd_dim+''] ? self.options.thumbSize[''+_gd_dim+''] : self.viewport[''+style[''+_gd_dim+'Low']+'']/self.scroller[''+style[''+_gd_dim+'Low']+'']*100+'%';
self.track[''+_gd_dim+''].el.style[''+style[''+_gd_dim+'Low']+''] = self.track[''+_gd_dim+''].styleSize;
self.thumb[''+_gd_dim+''].el.style[''+style[''+_gd_dim+'Low']+''] = self.thumb[''+_gd_dim+''].styleSize;
self.track[''+_gd_dim+''].numSize = self.track[''+_gd_dim+''].el['offset'+style[''+_gd_dim+'Cap']+''];
self.thumb[''+_gd_dim+''].numSize = self.thumb[''+_gd_dim+''].el['offset'+style[''+_gd_dim+'Cap']+''];
self.ratio[''+_gd_dim+''] = self.track[''+_gd_dim+''].numSize/self.scroller[''+style[''+_gd_dim+'Low']+''];
self.position.thumb[''+_gd_dim+''] = Math.abs(self.position.scroller[''+_gd_dim+'']*self.ratio[''+_gd_dim+'']);
self.thumb[''+_gd_dim+''].el.style[''+self.animatedProperty[''+_gd_dim+'']+''] = 'translate3d(0,'+self.position.thumb[''+_gd_dim+'']+'px,0)';
}
}
}
}
self.update = function()
{
/** get scroller specs **/
self.scroller.height = self.scroller.el.offsetHeight;
self.scroller.width = self.scroller.el.offsetWidth;
/** get viewport specs **/
self.viewport.height = self.viewport.el.offsetHeight;
self.viewport.width = self.viewport.el.offsetWidth;
/** determine scrollbar dimension **/
self.dimension = {};
self.dimension.horizontal = self.scroller['width'] > self.viewport['width'] ? 'horizontal' : false;
self.dimension.vertical = self.scroller['height'] > self.viewport['height'] ? 'vertical' : false;
/** Determine Min/Max values(can be custom for whatever reason),Animated Property,Start Position for specific dimension */
for ( var k in self.dimension )
{
if(self.dimension[''+k+''] !== false)
{
_gd_dim = self.dimension[''+k+''];
self.Min[''+_gd_dim+''] = self.options.Min[''+_gd_dim+''] ? self.options.Min[''+_gd_dim+''] : 0;
self.Max[''+_gd_dim+''] = self.options.Max[''+_gd_dim+''] ? self.options.Max[''+_gd_dim+''] : self.viewport[''+style[''+_gd_dim+'Low']+''] - self.scroller[''+style[''+_gd_dim+'Low']+''];
self.position.scroller[''+_gd_dim+''] = self.position.scroller[''+_gd_dim+''] ? self.position.scroller[''+_gd_dim+''] : 0;
}
}
if(self.options.visibleScrollbars)
{
iniScrollbar();
}
}
self.init();
}
var scroll = new scrollBar('.scroller',{
mouseWheelSpeed:300,
mouseWheel:true,
visibleScrollbars:true
});Ready to run.
| Test | Ops/sec | |
|---|---|---|
| in | | ready |
| inn | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.