Benchmark: css-before-after-content-or-multiple-dom-elements

css-before-after-content-or-multiple-dom-elements (version: 4)

When dealing with large dynamic lists of dom elements that tend to have something before or something after, is it faster to construct multiple dom elements or utilize :before / :after selectors with content

Comparing performance of: dom text suffix vs dom text suffix two parts vs css text suffix vs css text img suffix

Created: 8 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
   .dom-user {
      color: blue;
   }
   .dom-suffix {
      color: red;
   }
   .dom-img {
      height: 16px;
      width: 16px;
   }
   .css-user {
       color: blue;
   }
   .css-user[suffix]:after {
       color: green;
       content: attr(suffix);
   }
   .css-user[img]:before {
       content: attr(img, url);
   }


</style>
<div id='list'></div>

​x
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
   .dom-user {
      color: blue;
   }
   .dom-suffix {
      color: red;
   }
   .dom-img {
      height: 16px;
      width: 16px;
   }
   .css-user {
       color: blue;
   }
   .css-user[suffix]:after {
       color: green;
       content: attr(suffix);
   }
   .css-user[img]:before {
       content: attr(img, url);
   }
​
​
</style>
<div id='list'></div>

Script Preparation code:

var users = [];
for (var i = 0; i < 10; ++i) {
  users.push({
    'username': 'user ' + i,
    'img': 'https://www.google.com/images/branding/product/ico/googleg_lodp.ico',
    'suffix': '(' + i + ')'
  });
}

var list = $("#list");

 
var users = [];for (var i = 0; i < 10; ++i) {  users.push({    'username': 'user ' + i,    'img': 'https://www.google.com/images/branding/product/ico/googleg_lodp.ico',    'suffix': '(' + i + ')'  });}​var list = $("#list");​

Tests:

dom text suffix
list.empty(); for (let user of users) { list.append($(`${user.username}${user.suffix}`)); }
list.empty();
for (let user of users) {
list.append($(`${user.username}${user.suffix}`));
}
dom text suffix two parts
list.empty(); for (let user of users) { list.append($(`${user.username}`)) list.append($(`${user.suffix}`)); }
list.empty();
for (let user of users) {
list.append($(`${user.username}`))
list.append($(`${user.suffix}`));
}
css text suffix
list.empty(); for (let user of users) { list.append($(`${user.username}`)); }
list.empty();
for (let user of users) {
list.append($(`${user.username}`));
}
css text img suffix
list.empty(); for (let user of users) { list.append($(`${user.username}`)); }
list.empty();
for (let user of users) {
list.append($(`${user.username}`));
}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
dom text suffix
dom text suffix two parts
css text suffix
css text img suffix

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.59 Safari/537.36 OPR/41.0.2353.46

Browser/OS: Opera 41 on Windows

View result in a separate tab

Test name	Executions per second
dom text suffix	1782.0 Ops/sec
dom text suffix two parts	1028.8 Ops/sec
css text suffix	2053.6 Ops/sec
css text img suffix	1990.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):

Let's dive into the provided benchmark definition and explanations.

Benchmark Definition:

The provided benchmark is designed to compare the performance of different approaches for building dynamic lists of DOM elements with varying levels of complexity. Specifically, it compares four scenarios:

Building multiple DOM elements separately.
Using CSS pseudo-elements (:before and :after) with content.
Utilizing a single element with multiple attributes (CSS classes) to represent the text and image.

Options Compared:

The benchmark tests the performance of the following options:

Separate DOM Elements: Building individual elements for each user data point.
CSS Pseudo-elements: Using :before and :after pseudo-elements to add content to a single element.
Multi-Attribute Element: Creating a single element with multiple CSS classes to represent both text and image.

Pros and Cons of Each Approach:

Separate DOM Elements:
- Pros:
  - Easy to understand and implement.
  - No overhead from pseudo-elements or attribute manipulation.
- Cons:
  - Can lead to more DOM nodes, potentially impacting performance.
CSS Pseudo-elements:
- Pros:
  - Reduces the number of DOM elements created.
  - Allows for more efficient use of resources (e.g., less DOM manipulation).
- Cons:
  - May require more complex CSS and pseudo-element management.
Multi-Attribute Element:
- Pros:
  - Combines text and image into a single element, reducing DOM overhead.
  - Can be more efficient for rendering purposes.
- Cons:
  - Requires more complex attribute manipulation and CSS classes.

Library Used:

The benchmark uses jQuery as the library for DOM manipulation. Specifically, it utilizes append() and $() functions to create and manage DOM elements.

Special JS Feature or Syntax:

The benchmark utilizes CSS pseudo-elements (:before and :after) with content, which is a standard feature in modern browsers. Additionally, it uses attribute manipulation (e.g., attr(suffix)) to access attributes on the DOM element.

Alternatives:

If you're interested in exploring alternative approaches or libraries, consider the following:

Vanilla JavaScript: Implementing DOM manipulation using native JavaScript functions (document.createElement, appendChild, etc.) instead of jQuery.
Template Engines: Using template engines like Handlebars or Mustache to generate HTML templates and reduce DOM overhead.
Shadow DOM: Utilizing Shadow DOM (a new HTML feature) for more efficient attribute management and reduced DOM access.

Keep in mind that the choice of approach depends on your specific use case, performance requirements, and personal preference.

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark definition and explanations.

**Benchmark Definition:**

1. Building multiple DOM elements separately.
2. Using CSS pseudo-elements (`:before` and `:after`) with content.
3. Utilizing a single element with multiple attributes (CSS classes) to represent the text and image.

**Options Compared:**

The benchmark tests the performance of the following options:

* **Separate DOM Elements:** Building individual elements for each user data point.
* **CSS Pseudo-elements:** Using `:before` and `:after` pseudo-elements to add content to a single element.
* **Multi-Attribute Element:** Creating a single element with multiple CSS classes to represent both text and image.

**Pros and Cons of Each Approach:**

1. **Separate DOM Elements:**
	* Pros:
		+ Easy to understand and implement.
		+ No overhead from pseudo-elements or attribute manipulation.
	* Cons:
		+ Can lead to more DOM nodes, potentially impacting performance.
2. **CSS Pseudo-elements:**
	* Pros:
		+ Reduces the number of DOM elements created.
		+ Allows for more efficient use of resources (e.g., less DOM manipulation).
	* Cons:
		+ May require more complex CSS and pseudo-element management.
3. **Multi-Attribute Element:**
	* Pros:
		+ Combines text and image into a single element, reducing DOM overhead.
		+ Can be more efficient for rendering purposes.
	* Cons:
		+ Requires more complex attribute manipulation and CSS classes.

**Library Used:**

The benchmark uses jQuery as the library for DOM manipulation. Specifically, it utilizes `append()` and `$()` functions to create and manage DOM elements.

**Special JS Feature or Syntax:**

The benchmark utilizes CSS pseudo-elements (`:before` and `:after`) with content, which is a standard feature in modern browsers. Additionally, it uses attribute manipulation (e.g., `attr(suffix)`) to access attributes on the DOM element.

**Alternatives:**

If you're interested in exploring alternative approaches or libraries, consider the following:

* **Vanilla JavaScript:** Implementing DOM manipulation using native JavaScript functions (`document.createElement`, `appendChild`, etc.) instead of jQuery.
* **Template Engines:** Using template engines like Handlebars or Mustache to generate HTML templates and reduce DOM overhead.
* **Shadow DOM:** Utilizing Shadow DOM (a new HTML feature) for more efficient attribute management and reduced DOM access.

Keep in mind that the choice of approach depends on your specific use case, performance requirements, and personal preference.

Related benchmarks: