<div id="foo"></div>var element = document.getElementById("foo");var i = 1000;var name = 'bar'var rgx = new RegExp('(\\s|^)' + name + '(\\s|$)');var match = element.className.match( rgx );while (i--) { if(! element.className.match( rgx ) ){ element.className += " "+name; }}var element = document.getElementById("foo");var i = 1000;while (i--) { element.setAttribute("class", "bar");}var element = document.getElementById("foo");var i = 1000;while (i--) { element.classList.add("bar");}--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| className | |
| setAttribute | |
| classList |
| Test name | Executions per second |
|---|---|
| className | 5211.8 Ops/sec |
| setAttribute | 1082.7 Ops/sec |
| classList | 1164.8 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks and explore what's being tested on MeasureThat.net.
Benchmark Definition
The benchmark is comparing three approaches to add a class to an HTML element:
classNamesetAttribute (adding a CSS style attribute)classList (using the classList API)Options Comparison
Each approach has its pros and cons:
className: This method appends the new class name to the existing class names, separated by spaces. For example, if the element already has "foo" and "bar" classes, adding a new "baz" class will result in "foo baz bar". This approach can lead to messy class names, especially if you have many elements with multiple classes.setAttribute: Setting an attribute directly on the element is generally faster than modifying a property like className. However, this method requires setting a specific CSS style (e.g., "class: foo"), which might not be desirable in all cases. Moreover, using this approach can lead to inconsistencies if you need to access the class name programmatically.classList: The classList API is a more modern and convenient way to manage classes on elements. It provides a clear and consistent way to add, remove, or toggle classes. This method is generally faster than modifying className, but it requires support for this specific feature in browsers.Library: RegExp
In the first test case, var rgx = new RegExp('(\\\\s|^)' + name + '(\\\\s|$)'); creates a regular expression to match the class name with leading/trailing whitespace. The purpose of this library is to extract the class name from the element's className property.
Special JS Feature/ Syntax
The benchmark uses JavaScript features specific to WebKit-based browsers (e.g., Chrome OS). The presence of Safari and Chrome in the results indicates that these browsers are using their respective optimizations for handling classes. This might be a result of optimized compilation or specific engine implementations.
Other Alternatives
If you're interested in exploring alternative approaches, here are some:
style attribute: Instead of setting an attribute directly on the element, you could use the style attribute to set CSS styles. However, this method is generally slower and less efficient than using className, setAttribute, or classList.querySelector/querySelectorAll: You can also use document.getElementById("foo").querySelector(".bar") (or .querySelectorAll) to select elements with a specific class name. This approach requires the element to be visible in the DOM, which might not always be the case.In summary, MeasureThat.net is comparing three approaches to add classes to HTML elements: className, setAttribute, and classList. Each method has its pros and cons, and understanding these differences can help you make informed decisions about how to manage classes on your web applications.
