Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
set Class vs set Name2
(version: 1)
Benchmark.js
Comparing performance of:
set Class vs set Name
Created:
2 years ago
by:
Registered User
Go to the latest result
Script Preparation code:
let bestTable = document.createElement('body'); for (i = 0; i < 1000; i++) { let Array = document.createElement("div"); bestTable.append(Array[i]); }
Tests:
set Class
let el=document.getElementsByTagName('div'); for (let array of el){ array.classList.add('good'); }
set Name
let el=document.getElementsByTagName('div'); for (let array of el){ array.name="good"; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
set Class
set Name
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Browser/OS:
Chrome 120 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=498491" width="100%" height="500px"></iframe>
set Name
2.8M/s
set Class
1.0M/s
View exact numbers
Test name
Executions per second
✓
set Name
2,822,828 Ops/sec
set Class
1,021,306 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested. **Benchmark Definition** The benchmark is testing two approaches to add a class or property to an array of HTML elements: 1. `set Class` (Test Name: "set Class") 2. `set Name2` (Test Name: "set Name") The script preparation code creates 1000 HTML elements (`div`) and appends them to the `body` element. **Options being compared** In this benchmark, we have two options: 1. `array.classList.add('good')`: This approach uses the `classList` property of an array element to add a class. 2. `array.name="good"`: This approach sets a custom property `name` on an array element and assigns it the value `"good"`. **Pros and Cons** Here are some pros and cons of each approach: * `array.classList.add('good')`: + Pros: - More efficient, as it only adds a class without modifying the underlying DOM. - No risk of overwriting existing properties or classes. + Cons: - Only supported in HTML5 (Chrome 120 and later). - Might not work in older browsers. * `array.name="good"`: + Pros: - More compatible with older browsers. - Works even if the element doesn't have a class. + Cons: - Creates a custom property, which might lead to unexpected behavior or conflicts with other code. **Library and special JS feature** There is no explicit library mentioned in the benchmark definition. However, note that using `classList` requires support for HTML5, which is not universally supported. No special JavaScript features are used in this benchmark, as both approaches are standard JavaScript syntax. **Other alternatives** If you need to add classes or properties to array elements in older browsers, you can consider alternative approaches: 1. Use the `innerHTML` property with a string that includes the class name (e.g., `array.innerHTML += ' good';`). This method is not recommended, as it can lead to security issues and performance degradation. 2. Set the `style` attribute directly on the element (e.g., `array.style.color = 'red';`). This approach works in older browsers but may not be as efficient or readable as using `classList`. Keep in mind that these alternative approaches are generally considered less efficient and more error-prone than using `classList` or setting custom properties. The benchmark result shows the execution time for each test case, with "set Name" being faster on Chrome 120 (Desktop, Windows).
Related benchmarks
Set: Array.from vs Spread
Set vs Object add
Comments
Confirm delete:
Do you really want to delete benchmark?