Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
test123xxxxx
(version: 0)
Comparing performance of:
append vs assign vs classList
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo" class="s"></div>
Tests:
append
var element = document.getElementById("foo"); element.className += " bar bar2 bar3";
assign
var element = document.getElementById("foo"); element.className = "bar bar2 bar3";
classList
var element = document.getElementById("foo"); element.classList.add("bar"); element.classList.add("bar2"); element.classList.add("bar3");
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
append
assign
classList
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Browser/OS:
Chrome 121 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=500193" width="100%" height="500px"></iframe>
assign
7.6M/s
classList
1.5M/s
append
2K/s
View exact numbers
Test name
Executions per second
✓
assign
7,606,874 Ops/sec
classList
1,492,573 Ops/sec
append
1,722 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **Benchmark Overview** The benchmark measures the performance of different approaches to manipulate the `className` property of an HTML element in a web page. **Benchmark Definition JSON** The provided Benchmark Definition JSON contains three test cases: 1. **append**: This test case appends multiple classes to the `className` property using the `+=` operator. 2. **assign**: This test case sets the value of the `className` property directly using the assignment operator (`=`). 3. **classList**: This test case uses the `classList` API to add multiple classes to the element. **Options Compared** The benchmark compares three different approaches: 1. **append**: Using the `+=` operator to append multiple classes. 2. **assign**: Setting the value of the `className` property directly using the assignment operator (`=`). 3. **classList**: Using the `classList` API to add multiple classes. **Pros and Cons of Each Approach** Here are some pros and cons of each approach: 1. **append**: * Pros: Simple, readable code. * Cons: Potential performance issues due to string concatenation. 2. **assign**: * Pros: Fast and efficient way to set the `className` property. * Cons: Can lead to unexpected behavior if not used carefully (e.g., using multiple assignment operators in a row). 3. **classList**: * Pros: Modern and consistent API, suitable for modern browsers. * Cons: May require additional polyfills or support for older browsers. **Library Usage** None of the benchmark test cases use any external libraries, but they do rely on the `document` object and the `HTMLCollection` interface (which is built-in to JavaScript). **Special JS Features/Syntax** None of the provided test cases utilize any special JavaScript features or syntax. However, it's worth noting that some browsers may have slightly different behavior or optimizations for certain operations. **Other Alternatives** If you're interested in exploring alternative approaches, here are a few: 1. Using a template string: `class StringTemplate { static generate(className) { return `.${className}`; } }; var classes = ['bar', 'bar2', 'bar3']; var classNameString = classes.map(cls => StringTemplate.generate(cls)).join(''); element.className += classNameString;` 2. Using a library like jQuery or Lodash: Both of these libraries provide utilities for manipulating class names and have optimized implementations. Keep in mind that while these alternatives might be interesting to explore, they may not necessarily offer significant performance benefits over the baseline approaches tested by MeasureThat.net. Hope this explanation helps!
Related benchmarks
queryall vs classname
Comments
Confirm delete:
Do you really want to delete benchmark?