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
<dl id="cities-dropdown">
<dt id="cities-header" class="rounded-corner">Porto Alegre</dt>
<dd id="cities-content" class="rounded-bottom-corner shadow-box">
<ul id="cities-list" class="rounded-bottom-corner">
<li><a href="#" class="city underline">São Paulo</a></li>
<li><a href="#" class="city underline">Belo Horizonte</a></li>
<li><a href="#" class="city underline">Florianópolis</a></li>
<li><a href="#" class="city underline">Brasília</a></li>
<li><a href="#" class="city">Rio de Janeiro</a></li>
<li><a href="#" id="more">Mais cidades »</a></li>
</ul>
</dd>
</dl>
<script>
DropDownListOne = {};
DropDownListOne = function(id) {
var DDSPEED = 10;
var DDTIMER = 15;
var header = document.getElementById(id + '-header');
var content = document.getElementById(id + '-content');
// main function to handle the mouse events //
var ddMenu = function(d) {
clearInterval(content.timer);
if (d == 1) {
clearTimeout(header.timer);
if (content.maxh && content.maxh <= content.offsetHeight) {
return;
}
else if (!content.maxh) {
content.style.display = 'block';
content.style.height = 'auto';
content.maxh = content.offsetHeight;
content.style.height = '0px';
}
content.timer = setInterval(function() {
ddSlide(content, 1)
}, DDTIMER);
} else {
header.timer = setTimeout(function() {
ddCollapse(content)
}, 50);
}
};
// collapse the menu //
var ddCollapse = function(c) {
c.timer = setInterval(function() {
ddSlide(c, -1)
}, DDTIMER);
};
// cancel the collapse if a user rolls over the dropdown //
var cancelHide = function() {
clearTimeout(header.timer);
clearInterval(content.timer);
if (content.offsetHeight < content.maxh) {
content.timer = setInterval(function() {
ddSlide(content, 1)
}, DDTIMER);
}
};
// incrementally expand/contract the dropdown and change the opacity //
var ddSlide = function(c, d) {
var currh = c.offsetHeight;
var dist;
if (d == 1) {
dist = (Math.round((c.maxh - currh) / DDSPEED));
} else {
dist = (Math.round(currh / DDSPEED));
}
if (dist <= 1 && d == 1) {
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if ((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)) {
clearInterval(c.timer);
}
};
// Load the menu events with the activate and deactivate functions
this.loadMenu = function(activateFunction, deactivateFunction) {
header.onmouseover = function() {
activateFunction();
ddMenu(1);
};
header.onmouseout = function() {
deactivateFunction();
ddMenu(-1);
};
content.onmouseover = function() {
activateFunction();
cancelHide();
};
content.onmouseout = function() {
deactivateFunction();
ddMenu(-1);
};
};
};
DropDownListTwo = {};
DropDownListTwo = function(id) {
this.DDSPEED = 10;
this.DDTIMER = 15;
this.header = document.getElementById(id + '-header');
this.content = document.getElementById(id + '-content');
};
// main function to handle the mouse events //
DropDownListTwo.prototype.ddMenu = function(d) {
var obj = this;
clearInterval(this.content.timer);
if (d == 1) {
clearTimeout(this.header.timer);
if (this.content.maxh && this.content.maxh <= this.content.offsetHeight) {
return;
} else if (!this.content.maxh) {
this.content.style.display = 'block';
this.content.style.height = 'auto';
this.content.maxh = this.content.offsetHeight;
this.content.style.height = '0px';
}
this.content.timer = setInterval(function() {
obj.ddSlide(obj.content, 1)
}, this.DDTIMER);
} else {
this.header.timer = setTimeout(function() {
obj.ddCollapse(obj.content)
}, 50);
}
};
// collapse the menu //
DropDownListTwo.prototype.ddCollapse = function(c) {
var obj = this;
c.timer = setInterval(function() {
obj.ddSlide(c, -1)
}, this.DDTIMER);
};
// cancel the collapse if a user rolls over the dropdown //
DropDownListTwo.prototype.cancelHide = function() {
var obj = this;
clearTimeout(this.header.timer);
clearInterval(this.content.timer);
if (this.content.offsetHeight < this.content.maxh) {
this.content.timer = setInterval(function() {
obj.ddSlide(obj.content, 1)
}, this.DDTIMER);
}
};
// incrementally expand/contract the dropdown and change the opacity //
DropDownListTwo.prototype.ddSlide = function(c, d) {
var currh = c.offsetHeight;
var dist;
if (d == 1) {
dist = (Math.round((c.maxh - currh) / this.DDSPEED));
} else {
dist = (Math.round(currh / this.DDSPEED));
}
if (dist <= 1 && d == 1) {
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if ((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)) {
clearInterval(c.timer);
}
};
// Load the menu events with the activate and deactivate functions
DropDownListTwo.prototype.loadMenu = function(activateFunction, deactivateFunction) {
var obj = this;
this.header.onmouseover = function() {
activateFunction();
obj.ddMenu(1);
};
this.header.onmouseout = function() {
deactivateFunction();
obj.ddMenu(-1);
};
this.content.onmouseover = function() {
activateFunction();
obj.cancelHide();
};
this.content.onmouseout = function() {
deactivateFunction();
obj.ddMenu(-1);
};
};
function menuActivated() {}
function menuDeactivated() {}
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
Public methods (prototype) |
| ready |
Private methods |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.