Benchmark: Test clientWidth, width, offsetWidth

HTML Preparation code:


<div id='foo' style="padding: 2em; height: 10vw">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tincidunt erat in purus ullamcorper ultricies. Duis lacinia aliquet dolor. Maecenas velit enim, eleifend a, tempor eu, mattis in, nisl. Maecenas ut orci. Sed egestas auctor sem. Curabitur vitae pede vel nisl tristique commodo. Phasellus ut nisl. Cras massa. Suspendisse potenti. Vestibulum vitae augue. Mauris mauris sapien, aliquet vitae, tincidunt ac, volutpat eu, ante. Nunc sed quam.

Etiam sit amet urna. Phasellus consequat augue. Nulla imperdiet cursus urna. Vivamus malesuada sem sed lectus. Aenean ornare dignissim sapien. Suspendisse vulputate tortor et elit. Pellentesque vel eros. Vivamus magna leo, condimentum vitae, convallis id, ultricies non, diam. Nam venenatis, lorem quis pharetra interdum, tellus justo tincidunt ligula, at tempor est mauris eget sapien. Sed elit.

Pellentesque pharetra quam a purus. Duis feugiat sem. Pellentesque risus magna, accumsan quis, lobortis at, pulvinar id, lorem. Donec hendrerit ligula interdum neque. Sed nisl. Vestibulum dolor. Quisque lacus sem, posuere ac, mattis at, consectetuer eget, mi. In hac habitasse platea dictumst. Sed consequat sodales libero. Ut ut lacus. Integer sed nisi. Nunc consequat, lorem placerat venenatis convallis, pede purus sagittis nunc, a euismod tellus justo gravida augue. Vivamus tincidunt, odio vel rhoncus blandit, turpis sem facilisis velit, ac accumsan tortor nunc vel leo. Praesent leo sapien, dictum in, lobortis ac, consequat sit amet, orci. Praesent mollis sollicitudin est. Mauris vestibulum. Integer iaculis. Etiam mattis commodo turpis.</div>

Script Preparation code:

var el = document.getElementById('foo');

Tests:

clientWidth
el.clientWidth;
width
el.width;
offsetWidth
el.offsetWidth;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clientWidth
width
offsetWidth

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Browser/OS: Chrome 108 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
clientWidth	998194.3 Ops/sec
width	14188560.0 Ops/sec
offsetWidth	1102359.0 Ops/sec

Test clientWidth, width, offsetWidth (version: 0)

Comparing performance of: clientWidth vs width vs offsetWidth

Created: 2 years ago by: Guest

Jump to the latest result

clientWidth

width

offsetWidth

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A