Benchmark: jQuery height Vs Native height

HTML Preparation code:

<script
  src="https://code.jquery.com/jquery-3.4.0.min.js"
  integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
  crossorigin="anonymous"></script>

<div id="target">
</div>

Script Preparation code:

  	var $target = $("#target");
  	var target = document.getElementById("target");

Tests:

jQuery CSS function
$target.css("height");
jQuery height function
$target.height();
jquery inline styling
$target[0].style.height;
native inline styling
target.style.height;
Native offsetHeight (IE8+)
target.offsetHeight;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery CSS function
jQuery height function
jquery inline styling
native inline styling
Native offsetHeight (IE8+)

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: 11 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
jQuery CSS function	232702.5 Ops/sec
jQuery height function	199579.8 Ops/sec
jquery inline styling	7844622.0 Ops/sec
native inline styling	8002894.0 Ops/sec
Native offsetHeight (IE8+)	1371995.0 Ops/sec

jQuery height Vs Native height (version: 0)

Comparing performance of: jQuery CSS function vs jQuery height function vs jquery inline styling vs native inline styling vs Native offsetHeight (IE8+)

Created: 5 years ago by: Guest

Jump to the latest result

jQuery CSS function

jQuery height function

jquery inline styling

native inline styling

Native offsetHeight (IE8+)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A