Improving Performance in JavaScript by Altering Class Properties

Question

Improving Performance in JavaScript by Altering Class Properties

I need to dynamically change the color properties of two classes, but my current code is sluggish since these classes are repeated over 100 times throughout the code.

Any tips on optimizing this for better performance?

if (mainColor) {
    var elColors = document.querySelectorAll('.color')
    elColors.forEach(el => el.style.color = mainColor)
    var elBgColors = document.querySelectorAll('.bg-color')
    elBgColors.forEach(el => el.style.backgroundColor = mainColor)
}

(the user input provides the mainColor)

javascript jquery css

Answer 1

Answer №1

To maximize performance, it's best not to individually set styles for each element.

Instead, assign a new class to the parent element.

For instance:

In a dynamic manner - Using JavaScript:

var styles = document.querySelector('head style#dynamic'),
    sheet;

if (!styles) {
    styles = document.createElement('style');
    styles.id = 'dynamic';
    document.querySelector('head').appendChild(styles);
}

sheet = styles.sheet;
sheet.insertRule("body.mainTheme .color { color: red; }", 0);
sheet.insertRule("body.mainTheme .bg-color { background-color: blue }", 0);

if (!document.body.className.match(/(^|\s)mainTheme(\s|$)/s)) {
    document.body.className = document.body.className + " mainTheme";
}

In a static manner - JavaScript Section:

// jQuery: $('body').addClass('mainTheme');
if (!document.body.className.match(/(^|\s)mainTheme(\s|$)/s)) {
    document.body.className = document.body.className + " mainTheme";
}

In a static manner - CSS Section:

.mainTheme .color {
    color: red;
}
.mainTheme .bg-color {
    background-color: blue
}

Answer 2

To maximize performance, it's best not to individually set styles for each element.

Instead, assign a new class to the parent element.

For instance:

In a dynamic manner - Using JavaScript:

var styles = document.querySelector('head style#dynamic'),
    sheet;

if (!styles) {
    styles = document.createElement('style');
    styles.id = 'dynamic';
    document.querySelector('head').appendChild(styles);
}

sheet = styles.sheet;
sheet.insertRule("body.mainTheme .color { color: red; }", 0);
sheet.insertRule("body.mainTheme .bg-color { background-color: blue }", 0);

if (!document.body.className.match(/(^|\s)mainTheme(\s|$)/s)) {
    document.body.className = document.body.className + " mainTheme";
}

In a static manner - JavaScript Section:

// jQuery: $('body').addClass('mainTheme');
if (!document.body.className.match(/(^|\s)mainTheme(\s|$)/s)) {
    document.body.className = document.body.className + " mainTheme";
}

In a static manner - CSS Section:

.mainTheme .color {
    color: red;
}
.mainTheme .bg-color {
    background-color: blue
}

Answer 3

Answer №2

Although you've already approved a satisfactory answer, it's beneficial to introduce another alternative that makes use of CSS custom properties. This method involves updating a custom property (referred to as a 'CSS variable') in one central location so that the change is reflected wherever that custom property is utilized:

function updateColors(mainColor) {
  if (mainColor) {
    let root = document.querySelector(':root');

    root.style.setProperty('--customColor', mainColor);
  }
}

document.querySelector('input[type=color]').addEventListener('input', function(){
  updateColors(this.value);
});

:root {
  --customColor: red;
}

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

div.color {
  color: var(--customColor);
}

div.bg-color {
  background-color: var(--customColor);
}

<label><input type="color" /></label>
<div>no class</div>
<div class="color">'color'</div>
... (remaining code snippets omitted for brevity) ...

Answer 4

Although you've already approved a satisfactory answer, it's beneficial to introduce another alternative that makes use of CSS custom properties. This method involves updating a custom property (referred to as a 'CSS variable') in one central location so that the change is reflected wherever that custom property is utilized:

function updateColors(mainColor) {
  if (mainColor) {
    let root = document.querySelector(':root');

    root.style.setProperty('--customColor', mainColor);
  }
}

document.querySelector('input[type=color]').addEventListener('input', function(){
  updateColors(this.value);
});

:root {
  --customColor: red;
}

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

div.color {
  color: var(--customColor);
}

div.bg-color {
  background-color: var(--customColor);
}

<label><input type="color" /></label>
<div>no class</div>
<div class="color">'color'</div>
... (remaining code snippets omitted for brevity) ...

Improving Performance in JavaScript by Altering Class Properties

Answer №1

Answer №2

Similar questions

intl-tel-input's getExtension function is returning a value of 'null'

Changing the way in which text is selected and copied from a webpage with visible white space modifications

Retrieve data from a REST API in a dynamic manner without manually specifying the table structure in the HTML code

Implement JQuery to include a screensaver on your website

Encountering MIME type error (text/html) during Angular project deployment

What is the reason behind utilizing arrow functions in React event handlers?

Connect an Angular Service object to a Controller's Scope and keeping it in sync

Divide the array based on its individual values

Executing a windows application on the client side from aspx.cs

Looking to extract the first URL from a string using JavaScript (Node.js)?

Creating a bottom bar using React and Material UI

preventing a nested JavaScript function from being executed multiple times

The AJAX functionality is not triggering the necessary C# controller method

Typescript error: The argument containing 'username' and 'password' fields cannot be assigned to a parameter expecting only a 'string' type

JQuery kicks off the function when the document is loaded and also when the window

I'm looking for a more efficient and graceful way to implement jquery .slideToggle on numerous hidden divs. Any suggestions?

"Implementing a Texture as Material in Three.js: Step-by-Step Guide

Error encountered while sending AJAX request with JSON data type

Redux: The action was effectively triggered, but the state remained unformed

Toggle visibility of div elements in a list