Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
el.style vs cached style vs el.style.setProperty vs cached style.setProperty
(version: 2)
Comparing performance of:
el.style vs style vs el.style.setProperty vs style.setProperty
Created:
2 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<div></div>
Script Preparation code:
const el = document.querySelector('div'); obj = { el: el, style: el.style, propWidth: 'width', propHeight: 'height', }
Tests:
el.style
const style = obj.el.style; style[obj.propWidth] = Math.random() + 'px'; style[obj.propHeight] = Math.random() + 'px';
style
const style = obj.style; style[obj.propWidth] = Math.random() + 'px'; style[obj.propHeight] = Math.random() + 'px';
el.style.setProperty
const style = obj.el.style; style.setProperty(obj.propWidth, Math.random() + 'px'); style.setProperty(obj.propHeight, Math.random() + 'px');
style.setProperty
const style = obj.style; style.setProperty(obj.propWidth, Math.random() + 'px'); style.setProperty(obj.propHeight, Math.random() + 'px');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
el.style
style
el.style.setProperty
style.setProperty
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):
Let's break down the benchmark and its test cases. **Benchmark Overview** The benchmark compares four different approaches to setting CSS properties on an HTML element: 1. `el.style[obj.propWidth] = Math.random() + 'px';` 2. `style[obj.propWidth] = Math.random() + 'px';` 3. `style.setProperty(obj.propWidth, Math.random() + 'px');` 4. `style.setProperty(obj.propHeight, Math.random() + 'px');` **Approach 1: Direct Access to `el.style`** This approach uses direct access to the element's style property, as assigned in the benchmark preparation code: ```javascript const style = obj.el.style; ``` Pros: * Simple and straightforward * No additional overhead or indirection Cons: * May be slower due to indirect access to the style object * May have cache effects (more on this later) **Approach 2: Direct Access to `style` Object** This approach uses direct access to the style object, as assigned in the benchmark preparation code: ```javascript const style = obj.style; ``` Pros: * Faster than indirect access due to cache hits * Less overhead Cons: * May not be compatible with older browsers or versions of Chrome * Requires explicit declaration of the `style` property **Approach 3: `el.style.setProperty`** This approach uses the `setProperty` method on the element's style object, as assigned in the benchmark preparation code: ```javascript const style = obj.el.style; style.setProperty(obj.propWidth, Math.random() + 'px'); ``` Pros: * Fast and efficient due to native implementation * Compatible with most modern browsers Cons: * May not work for older browsers or versions of Chrome * Requires a separate call to `setProperty` for each property **Approach 4: `style.setProperty`** This approach uses the `setProperty` method on the style object, as assigned in the benchmark preparation code: ```javascript const style = obj.style; style.setProperty(obj.propWidth, Math.random() + 'px'); ``` Pros: * Fast and efficient due to native implementation * Compatible with most modern browsers Cons: * May not work for older browsers or versions of Chrome * Requires a separate call to `setProperty` for each property **Cache Effects** In Approach 1 (`el.style[obj.propWidth] = Math.random() + 'px';`), the indirect access to the style object may lead to cache effects. When the browser accesses the style object through `obj.el.style`, it may return a cached result instead of recalculating the value. This can slow down subsequent accesses to the same property. In Approach 2 (`style[obj.propWidth] = Math.random() + 'px';`), the direct access to the style object bypasses the cache, providing faster results. **Library: `obj.el.style` and `obj.style`** Both `el.style` and `style` objects are instances of the `CSSStyleDeclaration` interface. The main difference is that `el.style` accesses the element's inline styles, while `style` accesses the global style rules applied to the document. **Special JS Feature: `Math.random()`** The `Math.random()` function generates a random number between 0 (inclusive) and 1 (exclusive). In this benchmark, it's used to generate pseudo-random values for the CSS properties. Overall, the choice of approach depends on your specific use case and performance requirements. If you need fast and efficient access to the style object, Approach 2 or 4 might be a better fit. However, if you're working with older browsers or versions of Chrome, Approach 1 or 3 might be more suitable.
Related benchmarks:
querySelectorAll versus getElementsByClassName
querySelector versus getElementsByClassName
getElementsByClassName vs querySelectorAll (vsolonar)
document.body vs document.querySelector
Comments
Confirm delete:
Do you really want to delete benchmark?