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
<style>
.track_vertical
{
position:absolute;
top:0;
bottom:0;
margin:auto;
right:10px;
background:#231f1f;
width:3px;
z-index: 9999;
}
.thumb_vertical
{
position:absolute;
background:#7C2845;
width:5px;
top:0;
left:-1px;
cursor: url('../img/grab.cur'),move;
}
.track_horizontal
{
position: absolute;
left: 0;
right: 0;
bottom: 10px;
height: 3px;
margin: auto;
background: #231f1f;
z-index: 9999;
}
.thumb_horizontal
{
position:absolute;
background:#7C2845;
height:5px;
left:0;
top:-1px;
cursor: url('../img/grab.cur'),move;
}
</style>
<div class="viewport" style="background-color:blue;position:relative;overflow:hidden;width:500px;height:300px;">
<div id="unique_1" style="position: absolute;top: 0;left: 0;width:900px;height:900px;" class="scroller">
<img id="fake_target" style="position: relative;width:900px;height:900px;" src="http://akhmetelitheatre.ge/cms/scrollbar/img/1.jpg" />
</div>
</div>var _scrollBarInstances = [],
_scrollBarViewports = [],
filterArray = function(a,pop) {
return a.filter(function(i) {return pop.indexOf(i) < 0;});
},
returnDim = function(x,y)
{
var arr = [];
if(x){arr.push(x)}
if(y){arr.push(y)}
return arr;
},
_gd_activeAnimation = null,
animatedProperty = '-webkit-transform',
style = { horizontalLow : 'width', verticalLow : 'height',horizontalCap : 'Width',verticalCap : 'Height',horizontalXY : 'X',verticalXY : 'Y' },
frame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { return window.setTimeout(callback, 1000 / 60);},
stopFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame || function (callback) { window.clearTimeout(callback);};
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;
_scrollBarViewports.push(self.viewport.el);
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();
}Ready to run.
| Test | Ops/sec | |
|---|---|---|
| in1 | | ready |
| in2 | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.