Working speed: CSS vs JavaScript

Question

Working speed: CSS vs JavaScript

Which is faster, and therefore which is better to use CSS or JavaScript. For example, there is a group of elements, and I need to select one of them, so here's how to do it better, adding a new class (and so on. new style) or change its properties using JavaScript? We are not talking about pure JavaScript, but the question is also relevant for it, but about GWT.

3

javascript css gwt

Author: Nicolas Chabanovsky, 2011-05-26

Source

4 answers

score 5 · Answer 1

Pure js:

document.write('<br>');
var s = performance.now();
for (var i = 0; i < 100000; ++i)
  document.body.style.border = '1px red solid';
document.write(performance.now() - s);

document.write('<br>');
s = performance.now();
for (var i = 0; i < 100000; ++i)
  document.body.classList.add('redBorder');
  document.body.classList.remove('redBorder');
document.write(performance.now() - s);

.redBorder {
  border: 1px red solid;
}

Adding a class is faster (for me-25-30 times), especially since you can first check for the presence of the class. If you need to select an element when hovering, you can also use the css pseudo-class :hover.

score 2 · Answer 2

I did the second test. The results in Chrome dropped to 10 to 1. In other browsers, little has changed. Note: you must add the stroke one by one in each method, otherwise you will get incorrect results.

<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.redBorder{border:1px red solid}
</style>
</head>
<body>

<script>
for(var i = 0; i < 5000; ++i)
    document.body.appendChild(document.createElement('span'));

var sp = document.getElementsByTagName('span');
var str = '';

//*
str += '\n';
var s = (new Date()).getTime();
for(var i = 0; i < sp.length; ++i)
    sp[i].style.border = '1px red solid';
str += (new Date()).getTime() - s;
/**/

/*
str += '\n';
s = (new Date()).getTime();
for(var i = 0; i < sp.length; ++i)
    sp[i].className += ' redBorder';
str += (new Date()).getTime() - s;
/**/

document.write(str);
</script>

</body>
</html>

score 0 · Answer 3

Selecting one element from a group is changing its properties relative to the base properties. This is a direct work of CSS on its philosophy in the WEB

Three pillars:

HTML for data, markup, and layout framework
CSS for setting visual properties and display parameters/behavior of the wireframe
JavaScript for dynamics, interaction with the environment, and programming tasks

In your case:

Selecting elements is changing it of course, this part should be done by adding the CSS class
The assignment of the selection class itself can be done via CSS (: hover on the element itself or on the parent, if possible), or via JavaScript for more complex conditions (clicking on another element, rewinding the slider, entering the amount on the form, and so on)

As for the performance - you can perform 1000 and 1 test for each option. But this is unnecessary. Try to do the task" correctly " from the point of view of philosophy development or adopted methodology. Optimization is a matter for browser developers and interpreters. By the way, they will optimize only those variants of developer behavior that are accepted again in most cases

Most importantly, do not parse the CSS file using JS and do not assign each CSS property to each DOM element. Yes, I exaggerate. But it can be done. But you won't be measuring the running time of this horror, will you? Because it is not customary to do so

score 0 · Answer 4

When there is one element, it is faster to add another class to it from the style sheets, and when you need to change many elements, it is better to change the rule for this class in the style sheet.

var sp = [];
for (var i = 0; i < 5000; ++i) {
  let s = document.body.appendChild(document.createElement('span'));
  s.className = "blueBorder";
  sp.push(s);
}

var str = '';

str += '<br/>';
s = s = performance.now();
for (var i = 0; i < sp.length; ++i)
  sp[i].className += ' redBorder';
str += (performance.now() - s);


str += '<br/>';
s = s = performance.now();
let lastIndex = document.styleSheets[0].cssRules.length;
document.styleSheets[0].insertRule(".blueBorder{border: 1px solid blue}", lastIndex);
str += (performance.now() - s);


document.write(str);

.redBorder {
  border: 1px red solid;
}