Top Vs Transform

Benchmark created on August 21, 2024

Preparation HTML

<div style="height: 100px; position: absolute; left: 0; right: 0; background: red">text</div>

Setup

const divElement = document.querySelector('div');
let offset = 0;

async function nextPaint() {
	let resolver;
	const promise = new Promise((resolve) => {
		resolver = resolve;
	});
	window.requestAnimationFrame(resolver);
	return resolver;
}

async function scootTop() {
	offset++;
	divElement.style.top = `${offset}px`;
	await nextPaint();
}

async function scootTransform() {
	offset++;
	divElement.style.transform = `translateX(${offset}px)`;
	await nextPaint();
}

Teardown

offset = 0;
divElement.style.top = `0`;
divElement.style.transform = none;

Test runner

scootTop()

scootTransform()

Revisions

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

• Revision 1: published on August 21, 2024