Benchmark: jquery3.4.1.css vs getComputedStyle

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/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>

​x
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/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;
  }
}

 
  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');
var npaddingTop = $myDiv.css('padding-top');
getComputedStyle()
var npaddingTop = getComputedStyle(myDiv).paddingTop;
var npaddingTop = getComputedStyle(myDiv).paddingTop;
getStyle()
var npaddingTop = getStyle(myDiv, 'paddingTop');
var npaddingTop = getStyle(myDiv, 'paddingTop');
getStyle2()
var npaddingTop = getStyle2(myDiv)['paddingTop'];
var npaddingTop = getStyle2(myDiv)['paddingTop'];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 83 on Mac OS X 10.15.5

View result in a separate tab

Test name	Executions per second
jQuery.css	127237.3 Ops/sec
getComputedStyle()	320574.8 Ops/sec
getStyle()	547816.6 Ops/sec
getStyle2()	472341.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

Let's dive into the world of JavaScript microbenchmarks.

What is being tested?

MeasureThat.net is testing four different ways to retrieve CSS styles in JavaScript: getComputedStyle, getStyle, getStyle2, and jQuery's .css() method. Specifically, it's measuring the execution time of each approach for retrieving a particular style property (padding-top) from an HTML element.

Options compared:

getComputedStyle(myDiv).paddingTop;: This approach uses the native Web API to retrieve the computed style of an element.
getStyle(myDiv, 'paddingTop');: This approach is a wrapper function provided by the test case, which attempts to use the currentStyle property for older browsers that don't support getComputedStyle.
getStyle2(myDiv)['paddingTop'];: Similar to getStyle, but uses the window.getComputedStyle variable assignment instead of a separate function.
$myDiv.css('padding-top');: This approach uses jQuery's CSS manipulation method to retrieve the value of a style property.

Pros and Cons:

getComputedStyle(myDiv).paddingTop;:
- Pros: Fast, reliable, and widely supported across modern browsers.
- Cons: May not work in older browsers that don't support getComputedStyle.
getStyle(myDiv, 'paddingTop');:
- Pros: Works in older browsers by using the currentStyle property.
- Cons: Might be slower than getComputedStyle due to the additional overhead of the wrapper function.
getStyle2(myDiv)['paddingTop'];:
- Pros: Similar to getStyle, but uses a separate variable assignment instead of a function call. This might make it slightly faster or more efficient in some cases.
- Cons: May not be a significant difference, and the name suggests that it's equivalent to getStyle.
$myDiv.css('padding-top');:
- Pros: Convenient for jQuery users who want to retrieve style values without having to access the DOM directly.
- Cons: Might be slower than native methods due to the overhead of jQuery's CSS manipulation method.

Other considerations:

Browser compatibility: The test case specifically mentions that getComputedStyle is not compatible with older browsers (notably IE). This is why getStyle and getStyle2 are used for those cases.
Performance differences: The test results show that the native methods (getComputedStyle) are generally faster than the wrapper functions (getStyle, getStyle2). However, these differences might be negligible in practice.

Alternatives:

If you're looking for alternative approaches to retrieving CSS styles in JavaScript, consider using other libraries or frameworks like:

window.getElementStyle(): Another method provided by WebKit-based browsers to retrieve the current style of an element.
CSS API: The new CSS API provides a set of methods for manipulating and accessing CSS styles.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**What is being tested?**

MeasureThat.net is testing four different ways to retrieve CSS styles in JavaScript: `getComputedStyle`, `getStyle`, `getStyle2`, and jQuery's `.css()` method. Specifically, it's measuring the execution time of each approach for retrieving a particular style property (`padding-top`) from an HTML element.

**Options compared:**

1. **`getComputedStyle(myDiv).paddingTop;`**: This approach uses the native Web API to retrieve the computed style of an element.
2. **`getStyle(myDiv, 'paddingTop');`**: This approach is a wrapper function provided by the test case, which attempts to use the `currentStyle` property for older browsers that don't support `getComputedStyle`.
3. **`getStyle2(myDiv)['paddingTop'];`**: Similar to `getStyle`, but uses the `window.getComputedStyle` variable assignment instead of a separate function.
4. **`$myDiv.css('padding-top');`**: This approach uses jQuery's CSS manipulation method to retrieve the value of a style property.

**Pros and Cons:**

* **`getComputedStyle(myDiv).paddingTop;`**:
	+ Pros: Fast, reliable, and widely supported across modern browsers.
	+ Cons: May not work in older browsers that don't support `getComputedStyle`.
* **`getStyle(myDiv, 'paddingTop');`**:
	+ Pros: Works in older browsers by using the `currentStyle` property.
	+ Cons: Might be slower than `getComputedStyle` due to the additional overhead of the wrapper function.
* **`getStyle2(myDiv)['paddingTop'];`**:
	+ Pros: Similar to `getStyle`, but uses a separate variable assignment instead of a function call. This might make it slightly faster or more efficient in some cases.
	+ Cons: May not be a significant difference, and the name suggests that it's equivalent to `getStyle`.
* **`$myDiv.css('padding-top');`**:
	+ Pros: Convenient for jQuery users who want to retrieve style values without having to access the DOM directly.
	+ Cons: Might be slower than native methods due to the overhead of jQuery's CSS manipulation method.

**Other considerations:**

* **Browser compatibility**: The test case specifically mentions that `getComputedStyle` is not compatible with older browsers (notably IE). This is why `getStyle` and `getStyle2` are used for those cases.
* **Performance differences**: The test results show that the native methods (`getComputedStyle`) are generally faster than the wrapper functions (`getStyle`, `getStyle2`). However, these differences might be negligible in practice.

**Alternatives:**

If you're looking for alternative approaches to retrieving CSS styles in JavaScript, consider using other libraries or frameworks like:

* **`window.getElementStyle()`**: Another method provided by WebKit-based browsers to retrieve the current style of an element.
* **`CSS` API**: The new CSS API provides a set of methods for manipulating and accessing CSS styles.

Related benchmarks:

jquery3.4.1.css vs getComputedStyle (version: 0)

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

Created: 4 years ago by: Guest

Jump to the latest result

jQuery.css

getComputedStyle()

getStyle()

getStyle2()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):