<div id="test"></div>
el = document.getElementById("test");
let i = 0;
while (i < 10000) {
el.style.setProperty("color","red");
el.style.setProperty("border","1vmin solid red");
el.style.setProperty("padding","0.5vmin");
el.style.setProperty("background-color","black");
el.style.setProperty("height","1vh");
el.style.setProperty("width","1vw");
i++;
}
let i = 0;
while (i < 10000) {
el.style.cssText = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;";
i++;
}
let i = 0;
while (i < 10000) {
el.style = "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;";
i++;
}
let i = 0;
while (i < 10000) {
el.attributeStyleMap.set("color","red");
el.attributeStyleMap.set("border","1vmin solid red");
el.attributeStyleMap.set("padding","0.5vmin");
el.attributeStyleMap.set("background-color","black");
el.attributeStyleMap.set("height","1vh");
el.attributeStyleMap.set("width","1vw");
i++;
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
style.setProperty | |
style.cssText | |
style | |
attributeStyleMap.set |
Test name | Executions per second |
---|---|
style.setProperty | 36.5 Ops/sec |
style.cssText | 36.8 Ops/sec |
style | 34.0 Ops/sec |
attributeStyleMap.set | 12.6 Ops/sec |
Let's break down the provided benchmark and explain what is being tested.
The benchmark compares four different approaches to set CSS styles on an HTML element:
style.setProperty
: This method sets a property value for a style declaration using the syntax style.setProperty('name', 'value')
. It allows you to specify both the name of the property and its associated value, separated by a double quote.style.cssText
: This property allows you to set multiple CSS styles in a single string, separated by semicolons. The format is "color:red;border:1vmin solid red;padding:0.5vmin;background-color:black;height:1vh;width:1vw;"
.style
: This method sets the style declaration for an element using a string, similar to style.cssText
. However, it does not support multiple styles in a single string.attributeStyleMap.set
: This method allows you to set CSS properties on an element as attributes on the DOM node itself, rather than through the style
property. The format is "color":"red"
, "border":"1vmin solid red"
, etc.Now, let's discuss the pros and cons of each approach:
Pros:
style.setProperty
: This method provides more flexibility when setting multiple styles for an element, as it allows you to separate style names from values.attributeStyleMap.set
: This method can be faster if the browser does not need to parse or execute JavaScript code for the given styles.Cons:
style.setProperty
may require more code and is less flexible than other methods when dealing with multiple styles.attributeStyleMap.set
requires setting individual properties as attributes on the DOM node, which might lead to issues if you don't have control over the HTML source code or need to dynamically change the style.Pros:
style.cssText
: This method is easy to use and concise, especially when dealing with a single set of styles.style
: Similar to style.cssText
, but less flexible due to its limited support for multiple styles in a single string.Cons:
Other considerations:
attributeStyleMap.set
, you need to be aware that the browser may not always parse these attributes as CSS, especially if they are dynamically generated.style
and attributeStyleMap.set
) support shorthand properties like border
or background-color
. These can simplify the code but require careful consideration when setting multiple values.Additional notes on library usage:
None of the methods in this benchmark rely on a specific JavaScript library. However, it's essential to note that these methods may be subject to variations depending on the browser and its implementation of the respective CSS features.
In terms of special JS features or syntax:
This benchmark does not use any special JavaScript features, other than the standard ECMAScript syntax used for defining functions, variables, and control flow statements. The code should be executable in most modern environments without requiring additional setup or dependencies.