Does applying a style to an element that already has the same value result in a decrease in performance? Alternatively, do all browsers simply overlook it?

Assuming I have an element with the style top: 5px, and then I execute element.style.top = "5px";, will the browser readjust its position and trigger a layout again? Or does it recognize that there is no need to change anything? (Is this behavior specified in W3C standards?)

What is the reason for this behavior?

I am configuring certain values based on scrolling. For instance, when the scrollTop goes from 100 to 300, the top position of an element should transition from 25px to 50px.

If the user scrolls rapidly, moving from a scrollTop of 285 to 310, it means that the element's top position will not reach exactly 50px but rather end up at something like 48.125px.

To solve this issue, I adjust all scroll values above 300 so that the element's top position remains fixed at 50px.

javascriptjquerycsshtml

Answer №1

Not all browsers behave the same way, but in Chrome specifically, if you set a CSS property of an element to the same value or one that doesn't affect its appearance, it won't trigger a redraw. For more information on this topic, check out these resources: HTML5 Rocks & phpied

To test this behavior in Chrome, go to the Developer Tools settings (the three dots in the top right corner) and under "More tools," select "Rendering settings."

https://i.sstatic.net/UwN1C.png

Enable "Paint flashing."

https://i.sstatic.net/dtzbJ.png

Create a blank page with the following code snippet (note: this won't work in iframes due to different criteria for redrawing): 

  window.onscroll = function(){
document.body.style.background="yellow";
}
body{
  height: 200vh;
  }

As you scroll, you'll see only the scrollbar flashing green, indicating redraw. However, if you change the body opacity incrementally with each scroll event, it will trigger a redraw until the opacity reaches >=1.

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

Displaying the outcome in the success section using ajax

Issue with data insertion into database using ajax: The output is not showing up in the success section. Please review my script and form code below for any errors. Code: <script> $(document).ready(function () { $('#data_form' ...

jqueryajaxcodeigniter

Animate your images with a captivating wave effect using SVG animation

I've been working on animations and I have an SVG image that I want to move like a wave continuously. I've tried using GSAP and CSS but still haven't been successful. Can anyone offer any suggestions or help? It would be greatly appreciated. ...

htmlcssgsap

Using node.js to send custom data over a websocket

I came across an excellent tutorial on websockets. In this tutorial, the server decodes and writes a message to the console whenever it receives a message from the client. After that, the server sends the message back to the client. var firstByte = data ...

javascriptnode.jswebsocket

How can we efficiently generate ReactJS Router for Links and seamlessly display a unique page for each Link?

Currently, I have an array of objects named titleUrl, which contains titles and URLs retrieved from an API. To display these as links on the sidebar, I am utilizing a custom component called MenuLink. The links are generated by iterating over the keys in t ...

javascriptreactjs

Exploring Node JS Express Thread Clarity

Having recently delved into the world of node js, I've familiarized myself with its architecture. I grasp the concept of the event loop, the main thread (V8 engine thread), and the other threads handled by libuv. When the main thread needs to handle ...

javascriptnode.jsexpress

Step-by-step guide on creating a linear graph in CSS using a table

I am a newcomer to the world of CSS and I am looking to create a graph using CSS without the use of any libraries or frameworks. Can someone kindly assist me in drawing a linear graph using this HTML table? Appreciate any help in advance. <html> & ...

htmlcss

How can you correctly make an Ajax request using computed properties sourced from VueX Store?

Is there a way to make an AJAX call where one of the parameters is a computed State in VueX? For instance, if I use this.$axios.get('someUrl/' + accID ), with accID being a computed property from VueX (using MapState), sometimes it returns ' ...

javascriptvue.jsvuejs2axiosvuex

ScrollMagic : The JQuery element appears to be malfunctioning as a triggerElement

While reviewing the documentation The definition of triggerElement requires a selector, DOM object, or jQuery Object to indicate the start of the scene. If left undefined, the scene will commence at the beginning of the page (unless an offset is speci ...

jquerygsapscrollmagic

Styling text in JavaScript and CSS with colored fonts and underlines

I am looking to customize the CSS for the font style. <div id="a" onmouseover="chbg('red','b')" onmouseout="chbg('white','b')">This will change b element</div> <div id="b">This is element b</div ...

javascripthtmlcss

What is the method to extract mimeType from an HTMLImageElement?

After researching the MDN documentation on HTMLImageElement, I found no mention of the mimeType. I did come across some resources explaining how to retrieve the mimeType from a File Object. However, my specific requirement is to extract the mimeType from ...

javascripthtmlimage

Harness the power of React Material-UI with pure javascript styling

I am currently attempting to implement Material-UI in pure javascript without the use of babel, modules, jsx, or similar tools. <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8 ...

javascriptreactjsmaterial-ui

How can I clear a text box in Angular.js when the Google Autocomplete event is triggered?

Seeking assistance in AngularJS to clear the textbox value upon triggering the google map autocomplete event. Can anyone provide guidance? Here is the HTML code - <input ng-model="deployText" id="search_execute" class="form-control" type="text" place ...

javascriptangularjsinputautocomplete

Is it possible to validate only the fields that are currently visible using HTML form validation

I need a solution for excluding hidden fields from HTML form validation. My situation involves having two groups of form fields, each with some required attributes. Depending on user selection, one group may be hidden, and those fields should not contribut ...

javascripthtmljqueryvalidationtwitter-bootstrap-3

Is it possible to generate multiple modal windows with similar designs but varying content?

I am facing a challenge with 140 link items that are supposed to trigger a modal window displaying a user profile for each link. The issue is that each user profile contains unique elements such as three images, a profile picture, text paragraph, and socia ...

javascriptjqueryhtmlcssmodal-dialog

The Media Queries in the Wordpress html5blank theme are failing to function properly

While using the html5blank theme to develop a WordPress site, I noticed that my media queries are functioning properly locally. However, when I add them to the WordPress style.css file, they seem to stop working. Even after stripping away all other media q ...

phphtmlcsswordpress

using jQuery to eliminate an HTML element based on its attribute

How can I remove an element with the attribute cursor = "pointer"? I want to achieve this using JavaScript in HTML. Specifically, I am looking to remove the following item: <g cursor="pointer"></g>. It's unclear to me why this element has ...

javascriptjqueryhtml

What's up with this unconventional jQuery formatting? Can someone shed some light on

I recently found a plugin that toggles checkboxes, but unfortunately it's not functioning correctly with the latest version of jQuery so I'm currently working on debugging it. Could someone please provide an explanation for the following code sn ...

javascriptjquerydollar-sign

When utilizing a Javascript event listener within ReactJS with NextJS, the dynamically imported module without server-side rendering fails to load

Hello everyone, I am new to ReactJS and NextJS and would really appreciate some advice on the issue below. Thank you in advance! Here is my current tech stack: Node v16.6.1 React v17.0.2 Next.js v10.0.4 I'm working on implementing a carousel and si ...

javascriptreactjsnext.js

How to effectively expose a node controller function for testing in Mocha

Below is the code for my foo-controller.js. module.exports = function(params) { var router = require('express').Router(); var db = params.db var controller = {}; controller.getFoo = function (req, res) { // logic to ret ...

javascriptnode.jsexpressmocha.js

Tips for implementing validation on dynamically inserted fields in a form

My form has two fields, and the submit button is disabled until those fields are filled with some text. However, if I add a third field dynamically using AngularJS, validation will not be supported for the new field. Check out the example here <butto ...

javascriptangularjsvalidation