trucating decimals on numeric style properties

Benchmark created on

Description

is it faster to truncate long number strings so the browser can parse them faster?

Preparation HTML

<div class="faders"></div>

Setup

const fadersContainer = document.querySelector('.faders');
const faders = [];
for (let i=0; i<5000; i++) {
	const el = document.createElement('div');
	el.textContent = i.toFixed(3);
	fadersContainer.appendChild(el);
	faders.push(el);
}

Teardown

faders.forEach(f => f.remove());

Test runner

Ready to run.

Testing in
TestOps/sec
Raw Number
requestAnimationFrame(() => {
	const fadersCount = faders.length;
for (let i=0; i<fadersCount;i++) {
	faders[i].style.opacity = 1 / 7 + i / fadersCount
}
requestAnimationFrame(() => {
	deferred.resolve();
});
});
ready
String (3dp)
requestAnimationFrame(() => {
const fadersCount = faders.length;
for (let i=0; i<faders.length;i++) {
	faders[i].style.opacity = (1 / 7 + i / fadersCount).toFixed(3);
}
requestAnimationFrame(() => {
	deferred.resolve();
});
});
ready
String (15dp)
requestAnimationFrame(() => {
const fadersCount = faders.length;
for (let i=0; i<faders.length;i++) {
	faders[i].style.opacity = (1 / 7 + i / fadersCount).toFixed(15);
}
requestAnimationFrame(() => {
	deferred.resolve();
});
});
ready
String (constructor)
requestAnimationFrame(() => {
const fadersCount = faders.length;
for (let i=0; i<faders.length;i++) {
	faders[i].style.opacity = String(1 / 7 + i / fadersCount);
}
requestAnimationFrame(() => {
	deferred.resolve();
});
});
ready
String (toString)
requestAnimationFrame(() => {
const fadersCount = faders.length;
for (let i=0; i<faders.length;i++) {
	faders[i].style.opacity =(1 / 7 + i / fadersCount).toString();
}
requestAnimationFrame(() => {
	deferred.resolve();
});
});
ready

Revisions

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