Optimizing javascript for CSS style modifications

I am currently using pure JavaScript for animations without relying on jQuery or any other framework. I'm wondering what the most optimized approach is: Should I create classes for transitions in CSS like below?

CSS class:

    .all-div-has-this-class { transition: all 1s; }
    .class1 { left: 0; }
    .class2 { left: 30px; }

Javscript:

    testdiv.className += " class1";
    testdiv.className += " class2";

or should I simply initialize the testdiv position in the CSS and then just update it with testdiv.style.left = "30px"; in the JavaScript code?

It's worth mentioning that these operations are inside setTimeout functions to ensure proper timing. Furthermore, I need the solution to be purely JavaScript without the use of jQuery or any other animation framework.

javascripthtmlcsscss-animations

Answer №1

Manipulating the DOM can be resource-intensive, especially when incorporating a lot of animations with JavaScript. This is why CSS animations are utilized, as they leverage the browser's built-in functions to render animations.

With JavaScript code simply assigning CSS classes to the DOM elements, the browser then calculates and applies the styling rules based on these classes.

Answer №2

It's important to note that there is no one-size-fits-all answer when it comes to browser performance and hardware capabilities. However, an interesting experiment was conducted to compare the speed of changing text-align for 10000 elements using JavaScript to modify the CSS versus using plain CSS.

The results showed that CSS outperformed JavaScript significantly in terms of milliseconds:

Method CSS Time (ms) Javascript Time (ms)
Layout 107 104
Update Layer Tree 16 16
Recalculate Style 32 82

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the size of a Checkbox with CSS

Adjust the width of the checkbox for the call field to 25 pixels, ensuring it is displayed only when the left margin is clear. I'm having trouble figuring this out, even though it's probably something simple again. I double-checked that my style ...

htmlcssformscheckbox

Executing a MongoDB query within a loop in a Node.js environment

I've been struggling to incorporate a nested DB query inside an eachOf loop that needs to be synchronous. Despite trying various combinations and methods, I haven't been successful with executing it inside the foreach loop. async.eachOf(nc.vi ...

javascriptnode.jsnode-async

Chrome causing window.open to fail

I am currently working on developing a Cordova PhoneGap app and facing an issue with popping up a window for Facebook login after clicking a button. The popup works fine on iOS devices, but when I try debugging with Chrome, nothing happens even though th ...

javascriptiosfacebookcordovagoogle-chrome

Establishing a recurring interval when the component mounts for a specified period of time

I have read through several Q&As on this topic, but I am still unable to pinpoint what mistake I am making. The code snippet below is meant to display a countdown in the console and update the DOM accordingly, however, it only prints 0s in the console ...

javascriptreactjsasynchronoussetinterval

Utilizing a nested interface in Typescript allows for creating more complex and

My current interface is structured like this: export interface Foo { data?: Foo; bar?: boolean; } Depending on the scenario, data is used as foo.data.bar or foo.bar. However, when implementing the above interface, I encounter the error message: Prope ...

javascripttypescript

The ASP.NET Core MVC controller encounters a null input parameter when called by an ajax request

Here is the scenario involving an ajax call: ... $("#testBtn").click(function (e) { e.preventDefault(); $.ajax({ url: "/profile/GuestList", data: {"keytype": "1"}, method: "POST&q ...

javascriptc#ajaxasp.net-core.net-core

Transmit data from an HTML form to PHP using JSON

I am attempting to utilize JavaScript to send POST data. I have the data in an HTML form: <form name="messageact" action=""> <input name="name" type="text" id="username" size="15" /> <input name="massage" type="text" id="usermsg" si ...

javascriptphpjqueryhtmljson

Use JavaScript to change the text of a hyperlink to @sometext

<li class="some-class one-more"><label>twitter:</label> <a href="https://twitter.com/sometext?s=09" target="_blank" rel="noreferrer noopener">https://twitter.com/sometext?s=09</a> < ...

javascripthtmljquery

JavaScript creates a fading effect by looping in and out with three divs

I experimented with this code snippet found at http://jsfiddle.net/3KydB/ and attempted to modify it to work for 3 separate divs: window.fadeInAndOut = function () { $('.item_1').fadeToggle(function() { $('.item_2').fadeTog ...

javascriptjqueryhtmlfadeinfadeout

Styling the initial instance of an element within a parent element with jQuery and CSS

My current challenge is as follows: HTML <div id="content"> <h1>Headline</h1> <p>First paragraph that needs to be yellow.</p> <p>Second paragraph that need not change. :) </p> <p>Third parag ...

jqueryhtmlcss

Explore encoding of array objects into JSON format

I seem to be having trouble retrieving values from array objects. When passing my array of objects from PHP, I use the following syntax initiate_data(".json_encode($my_array)."); To check the array in JavaScript, I have written this code snippet functi ...

phpjavascriptjson

Execute an AJAX post request to the identical PHP page (utilizing the Jquery Form Plugin)

I am in the process of developing a new web interface using JavaTMP, an AJAX-based admin template. After spending time understanding its functionality, I have created a page with a form to allow users to create projects within my software. Typically, creat ...

javascriptphphtmlajax

The presence of 'touched' within Angular validation is causing a delay in method execution

Upon utilizing this validation method, it became apparent: <label>Password</label> <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': f.password.touc ...

javascriptangular

Does not work in Electron's Chrome environment, although it does work in Node's console

I've incorporated the npm package foreach-batch into my electron project. The package is properly installed and there are no issues related to a Cannot find module. var forEachBatch = require('foreach-batch') var stuff = [0,1,2,3,4,5,6,7,8, ...

javascriptnode.jsnpmelectron

What is the best method for ensuring three inside divs have equal heights?

I am working with a container div#content that holds three inner divs. I want to ensure that all three divs have the same height, but also expand based on their content. Here is an example of what I have tried: <!doctype html public "-//w3c//dtd html 4 ...

csshtmlheight

Using Jquery Ajax to Develop Laravel Dropdown Selection with Cascading Feature

I have been working with Laravel 5.6 and encountered an issue with my dropdown selection. Although I selected a province from the dropdown menu, the city menu did not display the corresponding cities. Below is the controller code that I am using: public f ...

javascriptphpjqueryajaxlaravel

Mobile devices experience crashes when running Three.js projects

I've been experimenting with a three.js project to delve into the framework. I successfully created a basic model that functions well on desktop browsers but crashes when accessed on mobile devices. You can view the project on my server Is there any ...

javascriptthree.js

Using Vue to iterate through a list with conditional logic is as intuitive

I am completely new to vue, and facing a challenge with a conditional situation that I usually handle with PHP. My goal is to iterate through an element with a condition inside it. Below is how I envision the structure: <ul> <li>A</li&g ...

phphtmlvue.jsvuejs2

The concept of optional parameters in MongoDB allows for increased flexibility

I've been working on a project using Node Js and Express, and I'm currently facing an issue with a get request that can take in 3 optional parameters. Here is an example: http://localhost:3000/transactions/?dateFrom=2019-01-01&dateTo=2020-07 ...

javascriptnode.jsmongodb

Displaying both the label and store ID in Jquery autocomplete data

I have implemented jQuery UI autocomplete with an AJAX source on my input field. The goal is to display the label to the user, while storing the corresponding ID in the value behind the scenes without using a hidden field. I aim to achieve this by storing ...

javascriptphpjqueryajaxautocomplete