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
top:y, left:x vs transform: translate
<script>
const Methods = {
POSITION: 0,
TRANSLATE: 1
};
// Range: [min, max]
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function renderChild(container, children, method) {
const gap = 12;
const child = document.createElement("div");
const width = 100;
const height = rand(100, 200);
const sums = children.map((col) => col.reduce((a, b) => a + b, 0));
const col = sums.indexOf(Math.min(...sums));
const x = col * width + gap * (col + 1);
const y = sums[col] + gap * (children[col].length + 1);
children[col].push(height);
child.style.position = "absolute";
child.style.width = `${width}px`;
child.style.height = `${height}px`;
const [r, g, b] = [rand(0, 255), rand(0, 255), rand(0, 255)];
child.style.background = `rgb(${r}, ${g}, ${b})`;
if (method === Methods.POSITION) {
child.style.top = `${y}px`;
child.style.left = `${x}px`;
} else if (method === Methods.TRANSLATE) {
child.style.top = 0;
child.style.left = 0;
child.style.transform = `translate3d(${x}px, ${y}px, 0)`;
}
container.appendChild(child);
}
</script>
var children = [[], []];
var container = document.createElement("div");
document.body.append(container);
container.remove()
Ready to run.
Test | Ops/sec | |
---|---|---|
Position |
| ready |
Translate |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.