Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
jQuery css vs JS style vs fastCss (2)
(version: 0)
Comparing performance of:
jQuery css vs JS style vs jQuery fastCss vs jQuery fastMultipleCss
Created:
2 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div> <div class="a" style="height: 100vh; width: 100vw; margin-top: 100px;"></div>
Script Preparation code:
jQuery.fn.fastCss = function(property, value) { this.each(function(){ this.style[property] = value; }); } jQuery.fn.fastMultipleCss = function(obj) { this.each(function(){ for (const [key, value] of Object.entries(obj)) this.style[key] = value; }); }
Tests:
jQuery css
const a = $(".a"); a.css("height", "100vh"); a.css("width", "100vw"); a.css("margin-top", "50px");
JS style
const a = $(".a"); a.each(function(){ const v = $(this)[0]; v.style.height = "100vh"; v.style.width = "100vw"; v.style["margin-top"] = "50px"; });
jQuery fastCss
const a = $(".a"); a.fastCss("height", "100vh"); a.fastCss("width", "100vw"); a.fastCss("margin-top", "50px");
jQuery fastMultipleCss
const a = $(".a"); a.fastMultipleCss({height: "100vh", width: "100vw", "margin-top": "50px"});
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
jQuery css
JS style
jQuery fastCss
jQuery fastMultipleCss
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** The provided benchmark measures the performance of three approaches for setting CSS styles on HTML elements: jQuery's `css()` method, JavaScript's `style` property, and fastCSS (a lightweight alternative to jQuery's CSS functionality). **Options Compared** 1. **jQuery's `css()` method**: This approach uses jQuery to set the CSS style properties directly on the DOM element. 2. **JavaScript's `style` property**: This approach sets the CSS style properties directly on the JavaScript object, which is then reflected in the DOM. 3. **fastCSS**: fastCSS is a lightweight alternative to jQuery's CSS functionality, designed for faster performance. **Pros and Cons** 1. **jQuery's `css()` method**: * Pros: Easy to use, well-established library with a large community of developers who can help with debugging and optimization. * Cons: Adds extra overhead due to the jQuery library itself, which may not be necessary for simple use cases. 2. **JavaScript's `style` property**: * Pros: Lightweight, easy to understand, and doesn't add any extra overhead. * Cons: May require more manual coding to set multiple styles or handle complex CSS rules. 3. **fastCSS**: * Pros: Designed for performance, lightweight, and easy to use. * Cons: May not be as well-established as jQuery's CSS functionality, with a smaller community of developers. **Library Used - fastCSS** FastCSS is a lightweight alternative to jQuery's CSS functionality. It provides a simple and efficient way to set CSS styles on DOM elements, similar to jQuery's `css()` method. However, fastCSS has some key differences: * FastCSS is designed specifically for performance, whereas jQuery's CSS functionality can be slower due to the library itself. * FastCSS is smaller in size compared to jQuery's CSS functionality. * FastCSS provides a more straightforward API for setting CSS styles. **Special JS Feature - Iterators** The benchmark uses JavaScript's `for...of` iterator loop (specifically, `Object.entries()`) to iterate over an object and set multiple styles at once. This feature is part of modern JavaScript syntax ( ECMAScript 2015+) and allows developers to write more concise code. **Benchmark Preparation Code** The provided script preparation code defines two jQuery methods: `fastCss` and `fastMultipleCss`. These methods provide a lightweight alternative to jQuery's CSS functionality, with the goal of achieving better performance. The `fastCss` method sets individual styles, while `fastMultipleCss` sets multiple styles at once using an iterator loop. **Other Alternatives** If you're looking for alternatives to these approaches, consider: 1. **Vanilla JavaScript**: Use native JavaScript methods (e.g., `style`, `innerHTML`) or libraries like LitElement or React to set CSS styles on DOM elements. 2. **Styling frameworks**: Consider using a styling framework like CSS-in-JS (e.g., styled-components, Emotion) or a CSS preprocessor like Sass or Less for more complex styling needs. Keep in mind that the choice of approach depends on your specific use case and performance requirements.
Related benchmarks:
Array.prototype.forEach vs Lodash forEach
Array.prototype.some vs Lodash some
Lodash forOwn vs native Object.values and forEach
Foreach lodash vs native
array[0] vs array.at(0) on 100000 elements
Comments
Confirm delete:
Do you really want to delete benchmark?