Run results for: css-before-after-content-or-multiple-dom-elements

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

Go to the benchmark

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:49.0) Gecko/20100101 Firefox/49.0

Browser: Firefox 49

Operating system: Linux

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
dom text suffix	12.4 Ops/sec
dom text suffix two parts	7.6 Ops/sec
css text suffix	13.3 Ops/sec

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>

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");

Tests:

dom text 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}`)); }
css text suffix
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}`)); }

Run results for: css-before-after-content-or-multiple-dom-elements

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

dom text suffix

dom text suffix two parts

css text suffix

css text img suffix