Benchmark: jquery.css vs getComputedStyle

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
  #wrap1 {
    width:300px;
    margin:10px;
    padding:10px;
    border:10px solid black;
  }

  #wrap2 {
    margin:10px;
    padding:10px;
    border:10px solid red;
  }

  #myDiv {
    margin:10px;
    padding:10px;
    border:10px solid blue;
  }
</style>

<div id="wrap1">
  <div id="wrap2">
    <div id="myDiv">
      Test
    </div>
  </div>
</div>

Script Preparation code:

  var myDiv = document.getElementById('myDiv');
  var $myDiv = $(myDiv);
var getStyle2;
  
  // getComputedStyle isn't compatible with all older browsers (notably IE),
  // so this is a wrapper function that works with those browsers.
  // From http://www.quirksmode.org/dom/getstyles.html
  function getStyle(el, styleProp) {
    if (el.currentStyle)
      var y = el.currentStyle[styleProp];
    else if (window.getComputedStyle)
      var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
    return y;
  }

if (window.getComputedStyle) {
  getStyle2 = window.getComputedStyle;
} else {
  getStyle2 = function(el) {
      return el.currentStyle;
  }
}

Tests:

jQuery.css
var npaddingTop = $myDiv.css('padding-top');
getComputedStyle()
var npaddingTop = getComputedStyle(myDiv).paddingTop;
getStyle()
var npaddingTop = getStyle(myDiv, 'paddingTop');
getStyle2()
var npaddingTop = getStyle2(myDiv)['paddingTop'];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery.css
getComputedStyle()
getStyle()
getStyle2()

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 month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:123.0) Gecko/20100101 Firefox/123.0

Browser/OS: Firefox 123 on Windows

View result in a separate tab

Test name	Executions per second
jQuery.css	777120.6 Ops/sec
getComputedStyle()	1471134.0 Ops/sec
getStyle()	1496152.0 Ops/sec
getStyle2()	1641410.0 Ops/sec

jquery.css vs getComputedStyle (version: 10)

Comparing performance of: jQuery.css vs getComputedStyle() vs getStyle() vs getStyle2()

Created: 7 years ago by: Registered User

Jump to the latest result

jQuery.css

getComputedStyle()

getStyle()

getStyle2()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A