offset vs getBoundingClientRect

Benchmark created on


Preparation HTML

<div id="parent">
	<div id="child" style="margin-left: -5px;">Text</div>
</div>

Setup

const parent = document.getElementById('parent');
const child = document.getElementById('child');

function boundInView() {
	const {left: parentLeft, right: parentRight} = parent.getBoundingClientRect();
	const {left, right} = child.getBoundingClientRect();

	return parentLeft <= left && parentRight >= right;
}

function offsetInView() {
	const {scrollLeft: parentLeft, offsetWidth: parentWidth} = parent;
	const {offsetLeft: childLeft, offsetWidth: childWidth} = child;

	return childLeft >= parentLeft && childLeft + childWidth <= parentLeft + parentWidth;
}

Test runner

Ready to run.

Testing in
TestOps/sec
bound
boundInView();
ready
offsetInView
offsetInView();
ready

Revisions

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