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'];

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 11 runs

getStyle()

2.5M/s

getStyle2()

1.3M/s

getComputedStyle()

1.2M/s

jQuery.css

647K/s

Fastest: getStyle() (3.8x faster)

View exact numbers

✓ getStyle(): 2,457,893 ops/sec
• getStyle2(): 1,302,510 ops/sec
• getComputedStyle(): 1,231,703 ops/sec
• jQuery.css: 647,317 ops/sec

Firefox 7 runs

getStyle2()

1.8M/s

getComputedStyle()

1.7M/s

getStyle()

1.5M/s

jQuery.css

857K/s

Fastest: getStyle2() (2.1x faster)

View exact numbers

✓ getStyle2(): 1,814,624 ops/sec
• getComputedStyle(): 1,693,467 ops/sec
• getStyle(): 1,451,813 ops/sec
• jQuery.css: 857,330 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (Android 15; Mobile; rv:146.0) Gecko/146.0 Firefox/146.0

Browser/OS: Firefox Mobile 146 on Android

View result in a separate tab

getStyle()

965K/s

getComputedStyle()

696K/s

getStyle2()

683K/s

jQuery.css

361K/s

View exact numbers

Test name	Executions per second
✓ getStyle()	965,287 Ops/sec
getComputedStyle()	695,926 Ops/sec
getStyle2()	683,406 Ops/sec
jQuery.css	361,208 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript microbenchmark test case, specifically designed to compare the performance of three approaches for retrieving CSS styles in an HTML document: jQuery's `.css()` method, `getComputedStyle` (a DOM API), and a custom wrapper function (`getStyle`) that mimics the behavior of `getComputedStyle`.

**Options Compared:**

1. **jQuery.css**: This approach uses jQuery's `.css()` method to retrieve the value of a CSS property.
2. **getComputedStyle**: This approach uses the `getComputedStyle` DOM API to retrieve the value of a CSS property for an element.
3. **getStyle**: This approach is a custom wrapper function that mimics the behavior of `getComputedStyle`. It checks if `window.getComputedStyle` is available and falls back to using the `currentStyle` property on the element.

**Pros and Cons:**

* **jQuery.css**: Pros:
	+ Easy to use and well-documented.
	+ Can handle more complex styles, such as inline styles and CSS class styles.
	+ Works in most browsers, including older ones.
*   Cons:
	+ May introduce unnecessary overhead due to jQuery's JavaScript overhead.
	+ Not suitable for very large numbers of elements or high-performance applications.
*   **getComputedStyle**: Pros:
	+ Lightweight and efficient.
	+ Provides accurate results without the need for additional library dependencies.
	+ Works well in modern browsers.
*   Cons:
	+ May not work in older browsers (notably IE).
	+ Requires careful handling of CSS properties, as some may be computed on demand.
*   **getStyle**: Pros:
	+ Mimics the behavior of `getComputedStyle` without relying on a specific library or API.
	+ Works well in both modern and older browsers.
	+ Can provide accurate results for most common use cases.

Cons:

*   May require additional code to implement, which can add overhead.
*   May not handle complex styles as efficiently as jQuery.css.

**Library:**

*   jQuery is a popular JavaScript library that provides a convenient way to manipulate HTML documents and retrieve CSS styles. Its `.css()` method is designed to be lightweight and efficient.

**Special JS Features/Syntax:**

None mentioned in this specific benchmark test case. However, it's worth noting that `getComputedStyle` relies on the DOM API, which uses JavaScript to interact with the browser's CSS engine. The custom `getStyle` wrapper function mirrors this behavior, using a similar approach to retrieve CSS properties.

**Other Alternatives:**

If you need more advanced or specialized features, such as:

*   **CSSOM (CSS Object Model)**: This is a W3C standard that provides a more comprehensive way of accessing and manipulating CSS styles. It offers methods for iterating over style rules, accessing attribute values, and retrieving computed values.
*   **CSS-Tricks**: A popular website offering tutorials, examples, and best practices on using CSS and JavaScript in web development.
*   **Modernizr**: A popular library that provides a way to detect feature support for various technologies, including CSS features.

Keep in mind that the performance benefits of each approach may vary depending on your specific use case, browser, and hardware.

jquery.css vs getComputedStyle (version: 10)

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

Created: 9 years ago by: Registered User

Go to the latest result

jQuery.css

getComputedStyle()

getStyle()

getStyle2()

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 11 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

jquery.css vs getComputedStyle (version: 10)

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

Created: 9 years ago by: Registered User

Go to the latest result

jQuery.css

getComputedStyle()

getStyle()

getStyle2()

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 11 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

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