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

Latest run results:

Run details: (Test run date: 3 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

Test name	Executions per second
jQuery.css	361207.7 Ops/sec
getComputedStyle()	695925.5 Ops/sec
getStyle()	965287.2 Ops/sec
getStyle2()	683405.9 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.

Related benchmarks:

jquery.css vs getComputedStyle (version: 10)

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

Created: 9 years ago by: Registered User

Jump to the latest result

jQuery.css

getComputedStyle()

getStyle()

getStyle2()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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